5 replies [Last post]
Chimpenstein
Offline
newbie
Last seen: 17 years 45 weeks ago
Joined: 2004-10-04
Posts: 6
Points: 0

Hi there, I have just done this site for work;
www.go-red.co.uk
it works fine on a PC, but as soon as you look at it on a MAC, no matter what browsers, the nav style fails.
Basically the style is just a box with a BG color and left, right and bottom borders.
On a PC the box fills the width of the DIV (120pixels) that the nav sits in (which is what I want becuase it looks like a button rather than a text link)
I just cannot get it work on a MAC, even though I specify the width as being 120 pixels, it only goes the length of the text.
The style for the nav is:

#nav a:link, #nav a:active, #nav a:visited {
background-color:#999999;
padding:2px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
font-weight:bold;
color:#FFFFFF;
width:120px;
height:15px;
border-top: none;
border-right: thin solid #ffffff;
border-bottom: thin solid #ffffff;
border-left: thin solid #ffffff;
}

Any ideas/help greatly appreciated!!
Cheers Stuart

chris_sw
Offline
Enthusiast
Leeds, UK
Last seen: 17 years 47 weeks ago
Leeds, UK
Joined: 2004-09-21
Posts: 115
Points: 0

Can't get boxed nav style to work on a MAC at all

Hi

I'd suggest looking at your site in a PC browser other than Internet Explorer- in Firefox I see the same results that you see on the Mac

The first thing I'd do is to remove the line <?xml version="1.0" encoding="iso-8859-1"?> at the top of the file. This line is there to throw IE into quirks mode, which will mean visual differences between IE and other browsers. Quirks mode is there as a legacy in IE so that it's rendering matches the incorrect application of CSS layout rules that older versions of IE suffered from. Without this line, IE will render your site in "standards mode" - much closer to the specifications on how CSS should work

Removing this line may seem like a backward step because your site in IE will then show the same "errors" as all the other browsers. Take heart that this is actually a good thing, and that re-coding your CSS to work with IE in standards mode gives your site a good chance of looking correct in other browsers and systems.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 3 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Can't get boxed nav style to work on a MAC at all

...and the missing line of code from your quoted snippet is [drum roll]...

display: block;

This will bring other spacing problems for you to sort out, but it's the single most important missing ingredient in your file.

Life's a b*tch and then you die!

Chimpenstein
Offline
newbie
Last seen: 17 years 45 weeks ago
Joined: 2004-10-04
Posts: 6
Points: 0

Can't get boxed nav style to work on a MAC at all

ok thanks guys I shall give it a try

Cheers Stu

Chimpenstein
Offline
newbie
Last seen: 17 years 45 weeks ago
Joined: 2004-10-04
Posts: 6
Points: 0

Can't get boxed nav style to work on a MAC at all

ok thank you
with a bit of fiddling that worked (for some reason I have had to specify the width of the nav style as 112px - I guess in a warped world, I have padding of 2 pixels so 2+2+2+2 = 8 and the original width of 120-8 = 112???!!! - why the height padding would get counted is beyond me.)

I have now chucked the links in a ul which sorted out the line spacing problems that adding display:block threw up (I was being a bit lazy using a <br/> tag to do the nav anyway.

Thanks again!
Stu
ps can't believe I forgot about the display tag - doh!

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 3 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Can't get boxed nav style to work on a MAC at all

The width is before padding and margins are added and as you are not setting your margins to zero, the nav box is probably inheriting margins (default or specified) from other div's. To be safe, always set all padding and margins to zero unless you are giving them a value. Overkill I know, but each browser acts in a different way and so I have found that it saves all sorts of problems to specificly set the values to zero.

Life's a b*tch and then you die!