IE and FF rendering differently

[Kneek]

I have a problem with a cms generated page. This page has a menu in between some text paragraphs. The menu is in the form of a <dl> list, and is styled to look like some sort of a table with a width of 38em. The problem is that in Firefox, the text paragraph is put right beside the <dl> list/menu. In IE, the next paragraph is put underneath the menu, like it should.

This is the code:

<dl class="csc-menu csc-menu-4">
<dt><a href="....">...</a></dt><dd>...</dd>
<dt><a href="...">...</a></dt><dd>....</dd>
<dt><a href="...">...</a></dt><dd>....</dd>
</dl>

Which is followed by normal code like <h2>...</h2><p>text</p>. I have tried to put the menu/dl list inside <div style="width: 100%"></div>, to no effect. I don't know if it matters, but this code is inside various other divs, because it's a css based layout.

I hope someone has any tips about what could be going wrong?

Thanks for reading!

[swa66]

It would be interesting to see the relevant portion of the css ...

I'd suggest:

look at the display: settings

develop in FF, check and fix for IE last (you can add conditional statements to fix it there and it's easier that way around)

using divs because you use css sounds like the wrong reason (although I've started out like that as well). Basically I now use a div as a way to group things logically together, not as a means of adding layout.

[cmarshall]

You need to completely override ALL the <dl> settings.

Things like text-indent, list-style-type, margin, padding, etc.

The suggestion about using <div> tags is a good one. The whole thing about lists is that browsers have a bit more leeway in rendering them, and they can make assumptions (the same goes for <h.> tags).

I get a laugh when "new paradigm" developers talk about <table> tags being misused as layout tools, then in the same paragraph, start telling you to mutate your lists.

The reason for using lists is that, when a browser can't render the CSS, they can always revert to the list format, and it will be at least usable, if ugly.

[Kneek]

Thanks for the suggestions so far. I always develop in FF, so I knew immediately something was wrong. Only later I found out that IE does render it the way I want. It's true that I use div's for the layout, but this also groups the parts logically together, more or less. This cms puts these specific menu's in dl lists automatically, I just applied these styles to make it look good.

dl.csc-menu, .csc-menu-4
{
width: 38.1em;
margin: 2 0;
padding: 0;
}

.csc-menu dt, .csc-menu-4 dt
{
width: 12em;
float: left;
margin: 0 0 0 0;
padding: .5em;
border-top: 2px solid #787;
font-weight: bold;
}

.csc-menu dd, .csc-menu-4 dd
{
float: left;
width: 24em;
margin: 0 0 0 0;
padding: .5em;
border-top: 2px solid #787;
}

The only other DL settings I've found generated by the cms, are not applicable. They are only used for certain images:

/* DL: This will place the images side by side */
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image { float: left; }
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DT { float: none; }
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD { float: none; }
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD IMG { border: none; } /* FE-Editing Icons */
DL.csc-textpic-image { margin: 0; }
DL.csc-textpic-image DT { margin: 0; display: inline; }
DL.csc-textpic-image DD { margin: 0; }

[Kneek]

I'm still trying to figure out a CSS or HTML solution to solve this problem.. Any suggestions, anyone? I'm really stuck.

[cmarshall]

Just so I'm clear. Do you want the following effect?

MENU CHOICE 1....MENU CHOICE 2
....Text for Menu 1..............Text for Menu 2

(Ignore the periods)

[Kneek]

Thanks for the reply. No, that's not the effect. It's rendered like this:

____________________________________________

Menu item......................... Page description text
____________________________________________

Another menu item............. Page description text
____________________________________________

Menu item 3....................... Page description text

[cmarshall]

Oh, in that case, it's not such a big deal. This will work:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
/* <![CDATA[ */
dl,dt,dd
{
margin: 0;
padding: 0;
text-indent: 0em;
display: block;
}
dt{
font-weight: bold;
font-size: large;
width: 150px;
float:left;
clear: left;
}
dd{
font-style: italic;
}
/* ]]> */
</style></head>
<body>
<dl>
<dt>MENU CHOICE 1</dt>
<dd>Menu Choice 1 Text</dd>
<dt>MENU CHOICE 2</dt>
<dd>Menu Choice 2 Text</dd>
</dl>
</body>
</html>

NOTE: This hasn't been tested so well. I have to run out the door now.

[Kneek]

Hi, sorry for the late reply!

Thanks for the code, but it doesn't solve my problem. The problem isn't that my menu isn't rendered like it should, but that the <p>paragraph</p> after the menu is placed right besides the menu, instead of underneath it.

The code you posted gives a table like menu, but the code I'm using also separates the menu items by putting a border above every item. Also, it limits the width of the whole menu.

Any further suggestions would be appreciated of course, thanks for the help so far.

[cmarshall]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
/* <![CDATA[ */
dl,dt,dd
{
margin: 0;
padding: 0;
text-indent: 0em;
border:none;
display: block;
}
dl{
width:300px;
}
dt{
font-weight: bold;
font-size: large;
width: 150px;
float:left;
clear: left;
}
dd{
float:left;
width: 150px;
font-style: italic;
}
p.breaker_breaker{
clear:both;
}
/* ]]> */
</style></head>
<body>
<dl>
<dt>MENU CHOICE 1</dt>
<dd>Menu Choice 1 Text</dd>
<dt>MENU CHOICE 2</dt>
<dd>Menu Choice 2 Text</dd>
</dl>
<p class="breaker_breaker">This is a following paragraph.</p>
</body>
</html>

You'll have to figure out the border issue. I have to run...

[Kneek]

Thanks a million, cmarshall!