1. Home
  2. Forums Index
  3. Browser Side / CSS 8:59 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Main nav position is wrong in Safari and ie6

Can't figure out why this is happening.

         

purewebdesigner

2:16 am on Apr 24, 2007 (gmt 0)

10+ Year Member



The main nav is only positioned right in ie 7 and ff pc and mac. The layout breaks in ie6 and safari. I have been trying to figure this out for like five days now... I thought safari was compliant, I even validated my code. Any suggestions?

Thanks in advance for your time
Curtis

[edited by: jatar_k at 12:34 pm (utc) on April 24, 2007]
[edit reason] no urls thanks [/edit]

Dabrowski

5:04 pm on Apr 24, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Please strip code down to minimum required to recreate the problem and post here.

Note though, just because your code is valid, doesn't mean it's right.

purewebdesigner

6:05 pm on Apr 24, 2007 (gmt 0)

10+ Year Member



So like I stated before the site layout is breaking in Safari (just the main nav shifts left)

Even more importantly frustrating to me is how win ie6 displays the menu all the way down the page. Also in win ie6 the subnav graphics are showing the full graphic and breaking the layout as well. Are there any set rules I can learn to follow to accommodate these browsers?

I'm trying my best to not pull my hair out and run screaming back to tables (can't help thinking that this layout would already be finished if it were built in tables) I hope to fully grasp why I'm having these layout issues, so I'm fully prepared to address them in the future.

First are the snippets I think are giving me problems, then below that is the entire code for the page.

css: 


/*Layout
-------------------------------------------------------------------------------------------*/
#wrapper {
width: 1000px;
background-color:#FFF;
margin: 0 auto;
}
.clear{
clear:both;
}
#header {
float:left;
background-color:#000;
width:auto;
height:auto;
padding:0;
border-bottom:1px solid #242424;
}
#logo{
float:left;
display: block;
margin: 59px 0 0 25px;
width: auto;
}
#logo img{
display: block;
}
/*Menu inside the header
-------------------------------------------------------------------------------------------*/
#mainnav{
float:right;
display: block;
margin: 0 20px 0 0 ;
vertical-align: bottom;
}
#mainnav ul{
top: 50px;
}
#mainnav ul li{
float: left;
}
#mainnav ul li a{
background: transparent url(images/nav_hover.gif) top left repeat;
padding: 0 12px 0 12px;
margin: 45px 0 0 0 ;
color: #b1a18c;
text-decoration: none;
display: block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: italic;
width: auto;
height: 82px;
line-height: 14em;
}
#mainnav ul li a:hover{
background: url(images/nav_hover.gif) repeat 0 -82px;
}
/* end  Menu inside the header
-------------------------------------------------------------------------------------------*/
#content {
width:1000px;
margin:0;
background: url("images/content_bg.gif") left bottom;
height:auto;
float:left;
}
#content p{
font-size:92%;
padding:10px 13px 0 13px;
}
#leftcol {
width:300px;
background: none;
height:490px;
float:left;
}
#leftcolcontent {
height:490px;
_height:510px;
}
/* start  subMenu inside the leftcol
-------------------------------------------------------------------------------------------*/
#subnavbox {
float:left;
display: block;
margin: 51px 0 0 0;
width: 304px;
height: 102px;
background: #000;
border-top: 1px solid #1e1e1d;
border-right: 1px solid #1e1e1d;
border-bottom: 1px solid #1e1e1d;
border-left: 0;
}
#subnav {
margin: 15px 0 15px 147px;
padding: 0;
height: auto;
width: 110px;
}
#subnav ul
{
border: 0;
margin: 0;
padding: 0;
list-style-image: none;
text-align: center;
}
#subnav ul li
{
display: block;
float: left;
height: 24px;
padding: 0;
margin: 0;
}
#subnav ul li a {
width: 117px;
height: 24px;
_height: 44px;
color: #b1a18c;
background: url("images/sub_nav_btn.gif") no-repeat scroll left top;
text-decoration: none;
display: block;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
vertical-align: middle;
margin: 0;
padding: 0 0 0 23px;
line-height: 2.5em;
}
#subnav ul li a:link, #subnav ul li a:visited {
background: url("images/sub_nav_btn.gif") no-repeat scroll left top;
color: #b1a18c;
}
#subnav ul li a:hover {
background: url("images/sub_nav_btn.gif") no-repeat 0 -24px;
color: #b1a18c;
}
#subnav a:active{
background: url("images/sub_nav_btn.gif") no-repeat scroll left top;
color: #b1a18c;
}
#subnav li #active a{
background: url("images/sub_nav_btn.gif") no-repeat scroll left top;
color: #b1a18c;
}
/* start  subMenu inside the leftcol
-------------------------------------------------------------------------------------------*/

Full CSS code: 


/* CSS Document
-------------------------------------------------------------------------------------------*/
* {
margin:0;
padding:0;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
/*fonts
-------------------------------------------------------------------------------------------*/
body {
background: url("images/bg_travel.gif") no-repeat center top;
font:13px Verdana, Arial, Helvetica, sans-serif;
*font-size:small;
*font:x-small;
color:#000;
}
table {
font-size:inherit;
font:100%;
}
pre, code {
font:115% monospace;
*font-size:100%;
}
body * {
line-height:1.22em;
}
body {
background-color:#000;
}
/*Layout
-------------------------------------------------------------------------------------------*/
#wrapper {
width: 1000px;
background-color:#FFF;
margin: 0 auto;
}
.clear{
clear:both;
}
#header {
float:left;
background-color:#000;
width:auto;
height:auto;
padding:0;
border-bottom:1px solid #242424;
}
#logo{
float:left;
display: block;
margin: 59px 0 0 25px;
width: auto;
}
#logo img{
display: block;
}
/*Menu inside the header
-------------------------------------------------------------------------------------------*/
#mainnav{
float:right;
display: block;
margin: 0 20px 0 0 ;
vertical-align: bottom;
}
#mainnav ul{
top: 50px;
}
#mainnav ul li{
float: left;
}
#mainnav ul li a{
background: transparent url(images/nav_hover.gif) top left repeat;
padding: 0 12px 0 12px;
margin: 45px 0 0 0 ;
color: #b1a18c;
text-decoration: none;
display: block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: italic;
width: auto;
height: 82px;
line-height: 14em;
}
#mainnav ul li a:hover{
background: url(images/nav_hover.gif) repeat 0 -82px;
}
/* end  Menu inside the header
-------------------------------------------------------------------------------------------*/
#content {
width:1000px;
margin:0;
background: url("images/content_bg.gif") left bottom;
height:auto;
float:left;
}
#content p{
font-size:92%;
padding:10px 13px 0 13px;
}
#leftcol {
width:300px;
background: none;
height:490px;
float:left;
}
#leftcolcontent {
height:490px;
_height:510px;
}
/* start  subMenu inside the leftcol
-------------------------------------------------------------------------------------------*/
#subnavbox {
float:left;
display: block;
margin: 51px 0 0 0;
width: 304px;
height: 102px;
background: #000;
border-top: 1px solid #1e1e1d;
border-right: 1px solid #1e1e1d;
border-bottom: 1px solid #1e1e1d;
border-left: 0;
}
#subnav {
margin: 15px 0 15px 147px;
padding: 0;
height: auto;
width: 110px;
}
#subnav ul
{
border: 0;
margin: 0;
padding: 0;
list-style-image: none;
text-align: center;
}
#subnav ul li
{
display: block;
float: left;
height: 24px;
padding: 0;
margin: 0;
}
#subnav ul li a {
width: 117px;
height: 24px;
_height: 44px;
color: #b1a18c;
background: url("images/sub_nav_btn.gif") no-repeat scroll left top;
text-decoration: none;
display: block;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
vertical-align: middle;
margin: 0;
padding: 0 0 0 23px;
line-height: 2.5em;
}
#subnav ul li a:link, #subnav ul li a:visited {
background: url("images/sub_nav_btn.gif") no-repeat scroll left top;
color: #b1a18c;
}
#subnav ul li a:hover {
background: url("images/sub_nav_btn.gif") no-repeat 0 -24px;
color: #b1a18c;
}
#subnav a:active{
background: url("images/sub_nav_btn.gif") no-repeat scroll left top;
color: #b1a18c;
}
#subnav li #active a{
background: url("images/sub_nav_btn.gif") no-repeat scroll left top;
color: #b1a18c;
}
/* start  subMenu inside the leftcol
-------------------------------------------------------------------------------------------*/
#rightcol {
width:690px;
height:490px;
float:right;
background: none;
}
#rightcolcontent {
height:490px;
_height:510px;
}
/* start  rightcol box
-------------------------------------------------------------------------------------------*/
#rightcolbox {
float:right;
display: block;
margin: 25px 0 0 0;
width: 675px;
height: 438px;
background: #000;
border-top: 1px solid #131212;
border-right: 0;
border-bottom: 1px solid #131212;
border-left: 1px solid #131212;
}
#footer {
clear:both;
}

Full HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Kiska Css V1.4</title>
<link href="screen.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
<!--
.style1 {font-size: 12px}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"><a href="#"><img src="images/kiska_media_logo.gif" alt="Kiska Media Logo" /></a></div>
 <!--<li id="active"><a href="#" id="current">Bio</a></li>-->
<div id="mainnav">
<ul>
<li><a href="#">Bio</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div> 
 </div>
<div id="content">
 <div id="leftcol">
<div id="leftcolcontent">
<div id="subnavbox">
<div id="subnav">
<ul>
<li><a href="#">Main Portfolio </a></li>
<li><a href="#">Travel Photography </a></li>
<li><a href="#">Stock Photography </a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="rightcol">
<div id="rightcolcontent">
<div id="rightcolbox">
</div>
 </div>
</div>
<div class="clear"></div>
 </div>
<div id="footer">
 <div align="center"><img src="images/footer.gif" width="1000" height="120" alt="Kiska Media Copyright 2007" /></div>
</div>
</div>
</body>
</html>

Thanks in advance for your wisdom.
Curtis

Dabrowski

9:45 pm on Apr 24, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



ok, you need a CSS guru on this one. I'd say you have far too many wrappers, far too many DIVs, and far too much CSS.

DIV layouts can be achieved with less HTML than tables!

I recently switched from tables to CSS layout and had all sorts of problems with it, see this thread:
[webmasterworld.com...]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 8:59 am May 2, 2026