3 replies [Last post]
nevets2001uk
nevets2001uk's picture
Offline
Regular
UK
Last seen: 10 years 2 days ago
UK
Timezone: GMT+1
Joined: 2004-01-14
Posts: 29
Points: 11

While testing my design in the site check forum it was uncovered that my site breaks in Firefox. I've corrected it except for where I have UL statements for my menu and tracker bar.

They use the following CSS

#subheader { width: 930px; margin-left: 25px; margin-bottom: 8px; }

#menu
{
border-bottom: #eceef1 5px solid;
}

#menu ul {
margin:0;
background: #313e5b;
border-bottom: #fff 3px solid;
list-style: none;
}

#menu li {
float: left;
font-size : 11px;
}

#menu li a {
padding: 7px 20px 7px 20px;
display: block;
background: #313e5b;
float: left;
margin: 0px;
border-left: #9aa0af 1px solid;
width: auto;
color: #e0e2e7;
}

#menu li a:hover {
background: #5279a9;
text-decoration:none;
}

It looks OK in IE but not firefox. Any help would be appreciated.

The full test site is at http://www.sjgphotography.co.uk/version2

Cheers,
Steve

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

This works in FF, have not

This works in FF, have not tried in IE

#subheader { margin-bottom:50px; margin-left:25px; width:930px; }

#menu {
border-bottom:5px solid #ECEEF1;
float:left;
width:930px;
}

#menu ul {
background:#313E5B none repeat scroll 0%;
border-bottom:3px solid #FFFFFF;
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:0pt;
width:930px;
}

let us know if this helps.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

nevets2001uk
nevets2001uk's picture
Offline
Regular
UK
Last seen: 10 years 2 days ago
UK
Timezone: GMT+1
Joined: 2004-01-14
Posts: 29
Points: 11

Thanks very much. It more or

Thanks very much. It more or less worked in IE but the margin was too big. End up changing it to...

#subheader { margin-bottom:8px; margin-left:25px; width:930px; display:table; } #menu { border-bottom:5px solid #ECEEF1; float:left; width:930px; }

#menu ul {
background:#313E5B none repeat scroll 0%;
border-bottom:3px solid #FFFFFF;
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:0pt;
width:930px;
}

I added the display:table which fixed it. Not sure exactly how or why that works, or even if it's a valid way to get the layout working but everything now seems to display as planned.

Cheers,
Steve

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

glad ya got it fixed.

glad ya got it fixed. :thumbsup:

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph