Help with <DIV>

ianhobo

Hi,
Has anybody got and ideas on how to deal with firefox inserting linebreaks after div tags an IE not?

I have a banner/image in a top div tag with a menu underneath. FF has a line break after the top image before the menu, but IE doesn't.
I've tried various options: having them in the one division, minus padding and margins. But the menu gets messed up...
any ideas?

<div id="bannerM">
	<img src="images/bannerYoga.jpg" height="132" width="871" alt="Yoga at Beyond Harmony" />
</div>
<div id="menu">
       <ul>
	menu.......
       </ul>
</div>

aidan_walsh

Do you have CSS attached to those IDs?

zAbbo

#bannerM img{ border: none; padding:0; margin:0}

?

Eoin

I think a div is an block-level element by default, so will typically put a carriage return in automatically.

try:
[html]
<div style="display: inline">
[/html]

ianhobo

aidan_walsh wrote: »

Do you have CSS attached to those IDs?

sorry......

#bannerM
{
	margin: auto;
	width: 871px;
	height: 132px;
	border-bottom:none;
	/*background-image:url(images/bannerM.jpg);*/
}

#menu
{
     font-family:Verdana, Arial, Helvetica, sans-serif;
     color:#FFFFFF;
     margin:auto;
     width: 871px;
     height: 2.25em;
     background-color: #FAA619;
     border-bottom:none;
}

ianhobo

eoin_s wrote: »

I think a div is an block-level element by default, so will typically put a carriage return in automatically.

try:
[html]
<div style="display: inline">
[/html]

Correct, but I have used "margin: auto" to centre the image, so adding an inline display style pushes it back over to the left, and there is still a line break.

#bannerM img{ border: none; padding:0; margin:0}

Unfortunately this doesn't work either.

If i use the inline display on the menu div, it all get corrupted.....

forbairt

try throwing a margin:0 padding:0 into your bannerM class you have it for the image but not for the div#bannerM

If you throw it up on a page it'll be solved in seconds for you I'd say

Edit: its possible your menu has a margin at the top which is going outside its container and pushing things down.

ianhobo

http://www.beyondharmony.ie/new/yoga.html

Its still a work in progress, so the style sheet has lots of stuff commented out, its hasn't been checked for validation, and i'm sure there are a few other "issues"
Its my first real go a completely table-less site and its this one cross browser issue thats causing me the most headache.

ianhobo

forbairt wrote: »

try throwing a margin:0 padding:0 into your bannerM class you have it for the image but not for the div#bannerM

If you throw it up on a page it'll be solved in seconds for you I'd say

Edit: its possible your menu has a margin at the top which is going outside its container and pushing things down.

The menu has no declared margins, and I added "margin:0; padding:0" to both the style sheet calss, and to the local page image tag, no effect

forbairt

#menu ul { margin:0; } should do the job for you .. enjoy

forbairt

BTW ... dump all your div's into a lets call it container div with margins auto ... and this means you don't have to keep defining auto margins for each element

ianhobo

forbairt wrote: »

#menu ul { margin:0; } should do the job for you .. enjoy

wohoo!

That did fix that problem, but it un-centers the menu then in IE pushing at all left ha ha

ianhobo

#menu ul 
{ 	
	margin-top:0;
	margin-bottom:0;
}

Got it
thanks for all your help and ideas

Hopefully will get it finished and tidied by the weekend!

ianhobo

forbairt wrote: »

BTW ... dump all your div's into a lets call it container div with margins auto ... and this means you don't have to keep defining auto margins for each element

ok, cool. Thanks for that