11 replies [Last post]
css_seth
Offline
Regular
minneapolis, mn
Last seen: 16 years 48 weeks ago
minneapolis, mn
Joined: 2004-01-02
Posts: 33
Points: 0

at the very least, just tell me where to look and/or start. i'm not necessarily expecting somebody to do all the work for me. but i'm learning CSS as i do this project, so as much help as possible would be great. once i get it once, i'm off and runnning..

http://www.esultants.com/d/dsm/

when viewed under IE5.5, it's broken as all hell. there are even some funky rendering issues with certain submenu buttons (they'll be blue if you decide to look) under teh Boats and Outboards pages. in IE 6 for instance, they get some extra height on the bottom. i fixed this same problem with the images in the right sidebar by giving the IMGs a "vertical-align: bottom" attr as suggested by somebody here, i believe. would doing the same thing to the text inside these anchors provide the solution? wrapping the text in SPANs perhaps? seems a bit excessive for my tastes.

any help is MOST appreciated.

firstreflex
firstreflex's picture
Offline
Enthusiast
Brooklyn USA
Last seen: 13 years 40 weeks ago
Brooklyn USA
Timezone: GMT-5
Joined: 2003-10-21
Posts: 104
Points: 0

broken IE 5.5 layout - help wanted

It looks like it's just a case of the IE5 broken box model.

http://www.tantek.com/CSS/Examples/boxmodelhack.html

css_seth
Offline
Regular
minneapolis, mn
Last seen: 16 years 48 weeks ago
minneapolis, mn
Joined: 2004-01-02
Posts: 33
Points: 0

broken IE 5.5 layout - help wanted

thanks much.

css_seth
Offline
Regular
minneapolis, mn
Last seen: 16 years 48 weeks ago
minneapolis, mn
Joined: 2004-01-02
Posts: 33
Points: 0

broken IE 5.5 layout - help wanted

okay. i hate to do this, but would anybody be willing to look at my layout in IE5 and explain which rules need to be hacked and why?

"why should i do your work for you?" you might be saying, and i would understand. but this project has become a lot of stress for me for a lot of reasons not having to do with the layout, and which aren't my fault, and i just want to get it done.

i dunno about the rest of you, but i have problems with anxiety and depression, and i'm getting to a point where i just can't compute and i feel like i'm going to break down.

so if anybody would be willing to help me out, i would be most appreciative.

thank you.

seth

firstreflex
firstreflex's picture
Offline
Enthusiast
Brooklyn USA
Last seen: 13 years 40 weeks ago
Brooklyn USA
Timezone: GMT-5
Joined: 2003-10-21
Posts: 104
Points: 0

broken IE 5.5 layout - help wanted

I did this quickly so there might be some mistakes but this should at least fix the box model problems:

Replace all of these rules:

#menu {
	height: 32px;
	padding: 4px 0px 0px 0px;
	margin: 0px;
	background: url(images/menu_bg.gif) repeat-x;
	text-align: center;
}



#menu a {
	background: url(images/menu_li_bg.gif) repeat-x;
	color: #6A2A2A;
	text-transform: uppercase;
	font-family: "Arial Narrow", Arial, Verdana, sans-serif;
	font-weight: bolder;
	letter-spacing: 2px;
	text-decoration: none;
	height: 22px;
	font-size: 14px;
	margin: 1px 0px 0px 0px;
	padding: 3px 5px 3px 8px;
	border-top: 1px solid #6A2A2A; 
	border-right: 1px solid #6A2A2A;
	border-bottom: 1px solid #6A2A2A;
	border-left: 1px solid #6A2A2A;
}


.subnav {
	float: right;
	position: relative;
	top: -8px;
	right: 0px;
	padding: 4px 0px;
	margin: 10px 0px 0px 0px;
	height: 22px;
	list-style: none inside;
}


.subnav a {
	background: #FFF; /* url(images/subnav_bg.gif) repeat-x */
	color: #2B70B6;
	font-family: "Arial Narrow", Arial, Verdana, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 2px;
	border: solid 1px #2B70B6;
	margin: 10px 0px 0px 0px;
	padding: 3px 3px 3px 5px;
	height: 20px;
	font-size: 14px;
	text-align: center;
}


a.manufacturer_logo {
	width: 120px;
	border: 1px solid #000;
	padding: 0px;
	margin: 5px auto;
}



#container {
	background: #FFF;
	position: absolute;
	top: 169px;
	left: 50%;
	width: 760px;
	margin: 0px 0px 0px -380px;
	padding: 0px;
	background: #FFF;
	text-align: left;
	background: url(images/container_bg.gif) repeat-y;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
}



#content { /* MAIN CONTENT AREA */
	background: #FFF;
	width: 587px;
	padding: 10px;
	margin: 0px;
	
}



#sidebar h1 {
	background: url(images/sidebar_h1_bg.gif) repeat-x;
	color: #2D5F4F;
	height: 19px;
	margin: 10px 0px;
	padding: 4px 0px 0px 5px;
	font-size: 12px;
	text-transform: uppercase;
	border-top: 1px solid #2D5F4F;
	border-bottom: 1px solid #2D5F4F;
}

With these:
#menu {
	padding: 4px 0px 0px 0px;
	margin: 0px;
	background: url(images/menu_bg.gif) repeat-x;
	text-align: center;
	height: 36px;/* False value for IE5/Win */
	voice-family: "\"}\""; 
	voice-family:inherit;
	height: 32px; /* Actual value for conformant browsers */	
	}
html>#menu {
	height: 32px; /* Be nice to Opera */
	}



#menu a {
	background: url(images/menu_li_bg.gif) repeat-x;
	color: #6A2A2A;
	text-transform: uppercase;
	font-family: "Arial Narrow", Arial, Verdana, sans-serif;
	font-weight: bolder;
	letter-spacing: 2px;
	text-decoration: none;
	font-size: 14px;
	margin: 1px 0px 0px 0px;
	padding: 3px 5px 3px 8px;
	border-top: 1px solid #6A2A2A; 
	border-right: 1px solid #6A2A2A;
	border-bottom: 1px solid #6A2A2A;
	border-left: 1px solid #6A2A2A;
	height: 30px;/* False value for IE5/Win */
	voice-family: "\"}\""; 
	voice-family:inherit;
	height: 22px; /* Actual value for conformant browsers */	
	}
html>#menu a {
	height: 22px; /* Be nice to Opera */
	}


.subnav {
	float: right;
	position: relative;
	top: -8px;
	right: 0px;
	padding: 4px 0px;
	margin: 10px 0px 0px 0px;
	list-style: none inside;
	height: 30px;/* False value for IE5/Win */
	voice-family: "\"}\""; 
	voice-family:inherit;
	height: 22px; /* Actual value for conformant browsers */	
	}
html>.subnav {
	height: 22px; /* Be nice to Opera */
	}


.subnav a {
	background: #FFF; /* url(images/subnav_bg.gif) repeat-x */
	color: #2B70B6;
	font-family: "Arial Narrow", Arial, Verdana, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 2px;
	border: solid 1px #2B70B6;
	margin: 10px 0px 0px 0px;
	padding: 3px 3px 3px 5px;
	font-size: 14px;
	text-align: center;
	height: 28px;/* False value for IE5/Win */
	 voice-family: "\"}\""; 
	voice-family:inherit;
	height: 20px; /* Actual value for conformant browsers */	
	}
html>.subnav a {
	height: 20px; /* Be nice to Opera */
	}



a.manufacturer_logo {
	border: 1px solid #000;
	padding: 0px;
	margin: 5px auto;
	width: 122px;/* False value for IE5/Win */
	 voice-family: "\"}\""; 
	voice-family:inherit;
	width: 120px; /* Actual value for conformant browsers */	
	}
html>a.manufacturer_logo {
	width: 120px; /* Be nice to Opera */
	}



#container {
	background: #FFF;
	position: absolute;
	top: 169px;
	left: 50%;
	margin: 0px 0px 0px -380px;
	padding: 0px;
	background: #FFF;
	text-align: left;
	background: url(images/container_bg.gif) repeat-y;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	width: 762px;/* False value for IE5/Win */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 760px; /* Actual value for conformant browsers */	
	}
html>#container {
	width: 760px; /* Be nice to Opera */
	}



#content { /* MAIN CONTENT AREA */
	background: #FFF;
	padding: 10px;
	margin: 0px;
	width: 607px; /* False value for IE5/Win */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 587px; /* Actual value for conformant browsers */	
	}
html>#content {
	width: 587px; /* Be nice to Opera */
	}



#sidebar h1 {
	background: url(images/sidebar_h1_bg.gif) repeat-x;
	color: #2D5F4F;
	margin: 10px 0px;
	padding: 4px 0px 0px 5px;
	font-size: 12px;
	text-transform: uppercase;
	border-top: 1px solid #2D5F4F;
	border-bottom: 1px solid #2D5F4F;
	height: 25px;/* False value for IE5/Win */
	voice-family: "\"}\""; 
	voice-family:inherit;
	height: 19px; /* Actual value for conformant browsers */	
	}
html>#sidebar h1 {
	height: 19px; /* Be nice to Opera */
	}

css_seth
Offline
Regular
minneapolis, mn
Last seen: 16 years 48 weeks ago
minneapolis, mn
Joined: 2004-01-02
Posts: 33
Points: 0

broken IE 5.5 layout - help wanted

thank you very much. i haven't implemented your new rules yet, but before i try it, i just want to say thank you so much for even bothering. it really means a lot to me. and i can see at a glance already that you've included some helpful comments. i didn't, for instance, quite grasp which value was supposed to be the intended, and which the hacked value, etc.

again, thanks, and i will get back to this thread with my results later.

css_seth
Offline
Regular
minneapolis, mn
Last seen: 16 years 48 weeks ago
minneapolis, mn
Joined: 2004-01-02
Posts: 33
Points: 0

broken IE 5.5 layout - help wanted

i was just pasting those rules into a document for later reference, and i just about teared up just thinking about how nice it was of you to even bother. so YET AGAIN.. a MOST sincere thank you, sir or ma'am.

css_seth
Offline
Regular
minneapolis, mn
Last seen: 16 years 48 weeks ago
minneapolis, mn
Joined: 2004-01-02
Posts: 33
Points: 0

broken IE 5.5 layout - help wanted

it worked beautifully. you are a kind soul, and once again, i am very thankful. you've provided me with a solution to my problem, but also a helpful resource in getting a handle on this very popular CSS hack.

my menu buttons still do not line up correctly in IE5 though. is this perhaps an issue with the UL they are contained within?

i do not expect another hand-me-down code snippet this time. i'll play around with it.

thanks again.

seth

css_seth
Offline
Regular
minneapolis, mn
Last seen: 16 years 48 weeks ago
minneapolis, mn
Joined: 2004-01-02
Posts: 33
Points: 0

broken IE 5.5 layout - help wanted

well, i'm still not sure what's going on here, but at least having a grasp on the Tantek hack helps.

i just don't know what's going on with these UL boxes. they have extra space, padding it seems, on top in IE5. my main menu, and then the .subnav class ULs in the body area are doing the same.

this hack solves the problem from an aesthetic view, but i wish the UL would just behave!

/* False values for IE5/Win */
	 height: 22px;
	 position: relative;
   top: -8px;
   right: 0px;
	 
   voice-family: "\"}\"";
   voice-family:inherit;
	 
	 /* Actual values for conformant browsers */
   height: 22px;
	 position: static;
   }

css_seth
Offline
Regular
minneapolis, mn
Last seen: 16 years 48 weeks ago
minneapolis, mn
Joined: 2004-01-02
Posts: 33
Points: 0

broken IE 5.5 layout - help wanted

p.s. go check out the stylesheet again, reflex. Smile

firstreflex
firstreflex's picture
Offline
Enthusiast
Brooklyn USA
Last seen: 13 years 40 weeks ago
Brooklyn USA
Timezone: GMT-5
Joined: 2003-10-21
Posts: 104
Points: 0

broken IE 5.5 layout - help wanted

Thanks for the credit, I'm glad I could help.

css_seth
Offline
Regular
minneapolis, mn
Last seen: 16 years 48 weeks ago
minneapolis, mn
Joined: 2004-01-02
Posts: 33
Points: 0

broken IE 5.5 layout - help wanted

me too. Laughing out loud