Browser css problem

saltedm8 · #1 (**permalink**) Aug 15th, 2006, 16:07

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 · #2 (**permalink**) Aug 15th, 2006, 22:10

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 · #3 (**permalink**) Aug 16th, 2006, 13:01

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 · #4 (**permalink**) Aug 16th, 2006, 21:45

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 · #5 (**permalink**) Aug 16th, 2006, 22:48

sorted ( i think ) - thank you

Ryan Fait · #6 (**permalink**) Aug 17th, 2006, 00:43

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 · #7 (**permalink**) Aug 17th, 2006, 09:24

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

thanks anyway

Ryan Fait · #8 (**permalink**) Aug 17th, 2006, 10:54

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 · #9 (**permalink**) Aug 17th, 2006, 13:04

i really dont know

ask them

( i thorght it was released ?? )

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Cross-browser text problem	LarsUnit	Web Page Design	5	Oct 8th, 2007 15:19
IE Browser Creates Problem	sakibonline	Web Page Design	1	Aug 8th, 2007 12:57
IE6 Problem...stupid browser	1840dsgn	Web Page Design	3	Jul 12th, 2007 09:48
CSS browser/menu problem - help required	BISH™	Web Page Design	2	Jan 24th, 2006 11:27
HTML/Browser Problem	Rconsole	Web Page Design	6	Dec 20th, 2005 23:35

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Browser css problem