BR tags not working in IE

[johnuk]

Hi all,

I am working on an eBay Store template for one of my clients, as a result of the environment In this instance am coding the template in Quirksmode.

My client has asked me to repoduce the menu found on his eCommerce Website into his eBay store, something of which I have no problem doing accept for IE which is giving me greif.


The html of the menu us thus, where 'NAME' appears directly below 'PRODUCT':

<ul class="menutabs">
  <li><a href="#tab1">PRODUCT<br />NAME A</a></li>
  <li><a href="#tab2">PRODUCT<br />NAME B</a></li>
  <li><a href="#tab3">PRODUCT<br />NAME C</a></li>
  <li><a href="#tab4">PRODUCT<br />NAME D</a></li>
  <li><a href="#tab5">PRODUCT<br />NAME E</a></li>
  <li><a href="#tab6">PRODUCT<br />NAME F</a></li>
  <li><a href="#tab7">PRODUCT<br />NAME G</a></li>
</ul>

This renders correctly in all Browsers, accept in IE instead of seeing:

PRODUCT
NAME A

I just get

PRODUCT

I can post the CSS as well if required, but does anyone have any idea how I might correct this? Any help much appreciated as this is an important job.


Many thanks!!

[xhtmlcoder]

Well from that code sample there is nothing that would cause IE to display weirdly so something else like CSS is in play so it might be apt to provide some of CSS that effects the above sample, etc.

[johnuk]

This is the CSS for that menu taken from my clients site (not my code). I know this problem does not occur in IE in Standards mode, but unfortantly this isnt an option!

.container {width: 500px; margin: 10px auto;}
ul.menutabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 57px;
	width: 100%;
	margin-top: 20px;
	border-bottom:1px solid #e6c54c;
}
ul.menutabs li {
	float: left;
	margin: 0;
	padding: 0;
	padding-top: 12px;
	padding-bottom: 10px;
	background: white;
	overflow: hidden;
	position: relative;
	text-align:left;
	height:35px;
}
ul.menutabs li.tab_right {
	float: right;
	margin: 0;
	padding: 0;
	padding-top: 22px;
	padding-bottom: 0px;
	background: #e6c54c;
	overflow: hidden;
	position: relative;
	text-align:left;
	height:35px;
}
ul.menutabs li a {
	text-decoration: none;
	color: #76c258;
	display: block;
	font-size: 1.2em;
	padding-left:11px;
	padding-right:11px;
	text-transform: uppercase;
	font-weight:bold;
}
ul.menutabs li a:hover {
	background: #292929;
	border-bottom: 1px solid #292929;
	color: white;
	
}	
html ul.menutabs li.active, ul.menutabs li.active a, html ul.menutabs li.active a:hover  {
	background: #292929;
	border-bottom: 1px solid #292929;
	color: #13B5E7;
}

[johnuk]

All other browsers:

othermenu.jpg

IE (Quirksmode)

iemenu.jpg

[RyanReese]

Why are you in quirks mode for IE? Put a doctype in there! It makes browsers behave more like IE5

[johnuk]

Yes I understand the need for Doctypes in webpages - eBay templates are written in quirksmode because you cant use a DTD in that environment.

If I didnt understand rendering modes I wouldnt be working in Web Development...

[Rayzur]

In this instance am coding the template in Quirksmode

overflow: hidden; on the LI seems to be the cause of your problem while running IE in quirksmode.

It looks like you can loose the relative positioning and fixed heights as well.

[RyanReese]

Yes I understand the need for Doctypes in webpages -
If I didnt understand rendering modes I wouldnt be working in Web Development...

Then probably about 50 or so percent of people don't deserve to beworking then. I'm including people who do improper doctypes too

[johnuk]

overflow: hidden; on the LI seems to be the cause of your problem while running IE in quirksmode.

It looks like you can loose the relative positioning and fixed heights as well.

proper job - thanks!

[johnuk]

Then probably about 50 or so percent of people don't deserve to beworking then. I'm including people who do improper doctypes too

I seem to forget not everyone sticks to neat standards compliant code