Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

menu distortion test on ie6

Status
Not open for further replies.
vasox56

vasox56

Technical User
Joined
May 8, 2007
Messages
75
Location
GB
hi.. i have a website that looks fine in the latest firefox and ie7 browsers.. i seem to remember however that the menu gets messed up and uses two lines instead of one in ie6 and below..

if someone could test this page on ie6 and opera.. and let me know how it looks i would appreciate it..

here is the page..

http://www.londonheathrowcars.com/test.htm

if the last menu item appears below the first menu item then its messed up.. they should all fit nicely on one line.

thanks.
 
Sort by date Sort by votes
In IE6, your <div id="bright"> is wrapping below where it should. If you make the width of "bright" a little lower or make the div id="wrap" width a little higher, that issue should be solved.

Besides that, everything looks fine in IE6.

[monkey][snake] <.
 
Upvote 0 Downvote
me said:
If you make the width of "bright" a little lower or make the div id="wrap" width a little higher, that issue should be solved.
Click to expand...

I am wrong here. You are clearing a float for your menu (based on what I see, it's a clear:left), and that is why that area is wrapping down.


[monkey][snake] <.
 
Upvote 0 Downvote
hi.. thanks for the reply..

here is what i have.. code wise..

the page... shortened to only relevant details..

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<title>test</title>

<link rel="stylesheet" type="text/css" href="scripts\newstyle.css" media="all" />
<script type="text/javascript" src="scripts\jscript.js"></script>

</head>

<body onload="setheight()">

<div id="wrap" class="clearfix">

	<div id="top">
		<img class="logo" src="images\Heathrow-Taxi-Logo.jpg" alt="London Heathrow Cars Header" />
	</div>

	<div id="bleft">
	<br />
	<br /><br /><br />
	</div>

	<div id="bright">
	<ul style="height:25px;" id="nav">	
            <li class="outerLi"><a href="">Home</a></li>
            <li class="outerLi"><a href="">Services</a></li>
			<li class="outerLi"><a href="">Accounts</a></li>
            <li class="outerLi"><a href="">Fleet</a></li>
			<li class="outerLi"><a href="">Faqs</a></li>
            <li class="outerLi"><a href="">Bookings</a></li>
			<li class="outerLi"><a href="">Contact</a></li>
        </ul>
	</div>

</div>

</body>

</html>

and the css that controls the menu..

Code: 
* {
  margin:0;
  padding:0;
}

body {
 background-color:#EBEBEB;
 text-align:center;
}


div#wrap {
 width:750px;
 margin:auto;
 position:relative;
 border:1px solid #666666;
 background-color:#ffffff;
 text-align:left;
}

div#top	{
 width:750px;
 height:161px;
 background-color:#616161;
}

div#bleft {
 width:223px;
 background-color:#4A4C4A;
 float:left;
 border:1px solid #666666;
 border-top: 0px solid;
 border-left: 0px solid;
 border-bottom: 0px solid;
}

div#bright {
 width:525px;
 background-color:#fff;
 float:right;
 text-align:left;
}

div#main {
 width:750px;
 background-color:#ffffff;
 clear:both;
}

div#menu .bccor {
 border-color:#ffffff #ffffff #ffffff #ffffff;
}

ul#nav {
 list-style-type:none;
}

ul#nav li.outerLi {
 border-width:1px 1px 1px 1px;
 border-color:#ffffff #b3b3b3 #b3b3b3 #ffffff;
 border-style:solid;
 position:relative;
 font-family:arial;
 float:left;
 font-size:80%;
 color: #666666;
 width:73px;
 background:white;
 text-align:center;
}

a {
 color: #666666;
 text-decoration: none;
}

a.baitlink {
 color:#fff;
 text-decoration: underline;
}

ul#nav li ul {
 list-style-type:none;
 display:none;
 position:absolute;
 left:-1px;
 top:23px;
 width:75px;
}

ul#nav li {
 position:relative;
}

ul#nav li li {
 line-height:23px;
 border:1px solid #ccc;
}

ul#nav li ul ul{
 position:absolute;
 left:74px;
 top:0px;
 background:#fff;
 width:74px
}

ul#nav li  a {
 display:block;
 line-height:17px;
 padding:3px 0 3px 0 ;
}

/* mac hide \*/

ul#nav li  a {
 height:1%
 }

/* end hide */

div#menu ul li ul {
 display:none;
 }

ul#nav li ul li a {
  background: #EBEBEB;
  display:block;
}

ul#nav li ul li a:hover {
  background-color:#666666;
  font-family:arial;
  color: #F99C08;
}

ul#nav li:hover ul ul, ul#nav li.over ul ul {
 display:none;
 }

ul#nav li:hover ul, ul#nav li.over ul,
ul#nav li li:hover ul, ul#nav li li.over ul {
 display:block;
}

.text {
 float:left;
 margin-top:30px;
 width:600px;
}

/* clear without structural mark-up */
.clearfix:after {
  content:"."; 
  display:block; 
  height:0; 
  clear:both; 
  visibility:hidden;
}

.clearfix {
  display:inline-block;
}

 /* mac hide \*/

 * html .clearfix {
  height: 1%;
  }

.clearfix {
 display: block;
 }
 /* End hide */

i have tried increasing the wrap size.. and decreasing the bleft and bright divs to squash them in but it doesnt seem to work..

let me know if you can see a solution.. thanks a lot for the help.
 
Upvote 0 Downvote
ok guys. im really struggling to find a solution here as some of the css is quite advanced.

ive put everythin into one page.. you can see it here..

http://www.londonheathrowcars.com/testpage.html

it looks fine on ie7 and ff, but the old ie browsers it messes up.

can someone look at the code and possibly suggest something.

the code is also pasted below as a single html page.

thanks.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>test</title>


<style type="text/css" media="all"> 
* {
  margin:0;
  padding:0;
}

body {
 background-color:#EBEBEB;
 text-align:center;
}


div#wrap {
 width:750px;
 margin:auto;
 position:relative;
 border:1px solid #666666;
 background-color:#ffffff;
 text-align:left;
}

div#top    {
 width:750px;
 height:161px;
 background-color:#616161;
}

div#bleft {
 width:223px;
 background-color:#4A4C4A;
 float:left;
 border:1px solid #666666;
 border-top: 0px solid;
 border-left: 0px solid;
 border-bottom: 0px solid;
}

div#bright {
 width:525px;
 background-color:#fff;
 float:right;
 text-align:left;
}

div#main {
 width:750px;
 background-color:#ffffff;
 clear:both;
}

div#menu .bccor {
 border-color:#ffffff #ffffff #ffffff #ffffff;
}

ul#nav {
 list-style-type:none;
}

ul#nav li.outerLi {
 border-width:1px 1px 1px 1px;
 border-color:#ffffff #b3b3b3 #b3b3b3 #ffffff;
 border-style:solid;
 position:relative;
 font-family:arial;
 float:left;
 font-size:80%;
 color: #666666;
 width:73px;
 background:white;
 text-align:center;
}

a {
 color: #666666;
 text-decoration: none;
}

a.baitlink {
 color:#fff;
 text-decoration: underline;
}

ul#nav li ul {
 list-style-type:none;
 display:none;
 position:absolute;
 left:-1px;
 top:23px;
 width:75px;
}

ul#nav li {
 position:relative;
}

ul#nav li li {
 line-height:23px;
 border:1px solid #ccc;
}

ul#nav li ul ul{
 position:absolute;
 left:74px;
 top:0px;
 background:#fff;
 width:74px
}

ul#nav li  a {
 display:block;
 line-height:17px;
 padding:3px 0 3px 0 ;
}

/* mac hide \*/

ul#nav li  a {
 height:1%
 }

/* end hide */

div#menu ul li ul {
 display:none;
 }

ul#nav li ul li a {
  background: #EBEBEB;
  display:block;
}

ul#nav li ul li a:hover {
  background-color:#666666;
  font-family:arial;
  color: #F99C08;
}

ul#nav li:hover ul ul, ul#nav li.over ul ul {
 display:none;
 }

ul#nav li:hover ul, ul#nav li.over ul,
ul#nav li li:hover ul, ul#nav li li.over ul {
 display:block;
}

.text {
 float:left;
 margin-top:30px;
 width:600px;
}

/* clear without structural mark-up */
.clearfix:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}

.clearfix {
  display:inline-block;
}

 /* mac hide \*/

 * html .clearfix {
  height: 1%;
  }

.clearfix {
 display: block;
 }
 /* End hide */
</style>

</head>

<body onload="setheight()">

<div id="wrap" class="clearfix">

    <div id="top">
        
    </div>

    <div id="bleft">
    <br />
    <br /><br /><br />
    </div>

    <div id="bright">
    <ul style="height:25px;" id="nav">    
            <li class="outerLi"><a href="">Home</a></li>
            <li class="outerLi"><a href="">Services</a></li>
            <li class="outerLi"><a href="">Accounts</a></li>
            <li class="outerLi"><a href="">Fleet</a></li>
            <li class="outerLi"><a href="">Faqs</a></li>
            <li class="outerLi"><a href="">Bookings</a></li>
            <li class="outerLi"><a href="">Contact</a></li>
        </ul>
    </div>

</div>

</body>

</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip Helpful tip
Solution to CSS Two Level Horizonal Menu
Replies
1
Views
1K
pmonett
pmonett
PeDa
  • Locked
  • Question Question
CSS two level horizontal menu
Replies
0
Views
916
PeDa
PeDa
lmcate
  • Locked
  • Question Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
517
lmcate
lmcate
lmcate
  • Locked
  • Question Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click
Replies
2
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top