<div> question. Options

[(claire)]

This website: http://www.michelle-smith.co.uk looks fine on a Mac, but on a PC some of the <div> elements have light blue backgrounds; does anyone know what I should do to fix it?

Also the text looks pixelated on the PC even though I've used these fonts within the style sheet (at .9em's).
font-family:Baskerville, Baskerville, Bembo, Palatino, Georgia, New York, Times New Roman, serif;

Any help would be ideal.

Thanks,

Claire

[Darin McGrew]

For starters, I recommend that you get rid of the content-free entry page and go straight to the content on your main page.

And once you leave your main page, there don't seem to be any obvious links back to it.

Which DIVs have light blue backgrounds?

And your layout overlaps text when my browser enforces a minimum font size.

[pandy]

Which DIVs have light blue backgrounds?

The only one I see is the one with the swirl on the splash page.

Maybe you use a lightblue background in the browser you use on the Windows machine? Odd choice, I admit... I see a lot of gray boxes. My browser background is gray. You should specify a background color in your style sheet to avoid surprises like this.

[(claire)]

Which DIVs have light blue backgrounds?
Apparently on IE all of the sub-menu's do, and there's a blue cast over the entire design, indicating it must be that boarder design images (boarder.png) dropped above of the other div layers.

And your layout overlaps text when my browser enforces a minimum font size.
Yes, I've used em's within the style sheet to try to control the font size, would you recommend using pixel weights instead?
Also kept this text within a <div> with width of 320px so unsure how it's creaping outside of the white box <div> below it?

Thanks kindly for your help.

This post has been edited by (claire): Sep 16 2007, 04:06 PM

[Darin McGrew]

Apparently on IE all of the sub-menu's do, and there's a blue cast over the entire design, indicating it must be that boarder design images (boarder.png) dropped above of the other div layers.

Hmm... It could be the white balance of the monitors is different. Or maybe it's something funky with MSIE's support (or lack thereof) for PNG alpha transparency.

And your layout overlaps text when my browser enforces a minimum font size.
Yes, I've used em's within the style sheet to try to control the font size, would you recommend using pixel weights instead?

No. I recommend leaving the font size alone. Use 100% for the body text, make headings and the like larger than 100%, and make legalese and similar fine print smaller than 100%.

Also kept this text within a <div> with width of 320px so unsure how it's creaping outside of the white box <div> below it?

When the text is too wide to fit in a line 320px wide, then it's going to wrap to a second line. You've done something to limit the height of the DIV, so the content spills out of it.

[pandy]

Which DIVs have light blue backgrounds?
Apparently on IE all of the sub-menu's do, and there's a blue cast over the entire design, indicating it must be that boarder design images (boarder.png) dropped above of the other div layers.

As said, not in my IE.