Browser css problem

[saltedm8]

this image is IE 7 beta, could someone tell me how i can sort it please

http://www.recipebite.co.uk/menu.jpg

my website - http://www.recipebite.co.uk/_/

thank you

[Ryan Fait]

It looks like it might be a padding bug in IE. I don't know how refined the browser is, but IE has always had trouble with the CSS box model. Try changing the class below to this:

Code: Select all

a.mainlevel:link, a.mainlevel:visited {
	height: 20px;
	padding: 0 0 0 20px;
	color: #544435;
	font-size: 300 15px/25px Comic Sans MS;
	text-align: left;
	text-decoration: none;
	background: #ffb672 url("../images/menu_bg.png") no-repeat 0 0;
	display: block;
}

Heh, sorry for reogranizing it. I have a rather strict placement of classes so I can find them in a snap. I'm not sure if it'll work, but it's worth a try.

[moojoo]

For starters try replacing

font-size: 300 15px/25px Comic Sans MS; with

Code: Select all

 font-size: 0.9em;
font-family: Comic Sans MS;

although not sure whay comic sans would even be used but eh I'm just picky.

Also add a width:100%; which will fix and additional spacing under the LI's in IE and set the overflow of the links container to hidden;

Also

padding: 0 0 0 20px; may work better like padding:8px 0 8px 20px; With paddign etc you can eliminate the height as well so they will scale a bit more too.

Here is an example of a list similar to yours (Not 100% IE ready but gives you the idea).

Code: Select all

#blogposts {
    padding:0;
    margin:0;
    width:220px;
}

#blogposts li {
    list-style-type:none;
    text-indent:18px;
}

#blogposts li a {
    padding:8px 0 8px 0;
    display:block;
    font-weight:bold;
    color:#333333;
    background-color:#EFEFEF;
    text-decoration:none;
    margin:0 0 1px 0;
}

#blogposts li a:hover {
    background-color:#CCCCCC;
}

[saltedm8]

thanks for your replys, ile give it a shot ( p.s sorry for taking a while to reply, but i have been trying to design a new logo for here )

thank you

[saltedm8]

sorted ( i think ) - thank you

[Ryan Fait]

My way, using the CSS font shorthand does the exact same thing as yours only it's in another measurement... Just thought I'd put that out there. Don't use padding to center text in a fixed height box!!! The "13px/25px" means a 13px font with a 25px line height. The text will be vertically dead center of the 25 pixels. It's cleaner code and breaks less than padding will.

[saltedm8]

problem is - it does this to the menu http://www.recipebite.co.uk/menu.jpg ( i did try it )

thanks anyway

[Ryan Fait]

Oh god, please tell me IE 7 will support standard line-height like every other version of IE when it's finally released.

*pleading on bended knee

[saltedm8]

i really dont know

ask them ( i thorght it was released ?? )