homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

firefox wraps h1 tag in div
ie expands the h1 tag to fit but ff wraps it

 7:49 pm on Dec 15, 2011 (gmt 0)

Hi all

FF is wrapping our h1 tag....

<div id="ad">

<div class='abta'>blah blah</div><h1>Some text h1 heading</h1>


In ie the h1 expands to fit but in FF it wraps the text,
is there a way we can stop this wthout using H1 display:inline

#logohome{width:100%;font-size:8pt;text-align:left;margin:0 0 10px;}#logohome #ad{float:right;padding:2px 0 1px 4px;}

H1{font-size:18px;font-weight:500;margin:.1em 5px;}

Thanks for reading.



 11:12 pm on Dec 15, 2011 (gmt 0)

When you say "wrap" do you mean insert a line break before, insert a line break in the middle, or something else entirely?

You don't show the css for class = "abta" which would seem to be crucial. By default, both <div> and <h\d> display as blocks-- that is, starting on a new line.

Are you in html 4 or 5? The behavior of floats is different in ways that some browsers may not have caught up to.

The rough-and-dirty way to prevent a small element from breaking in the middle is to include {white-space: nowrap} --but don't quote me on the hyphens, because I always get it wrong when there's no Syntax Highlighting to help.


 11:16 pm on Dec 15, 2011 (gmt 0)

I'm not sure, but the CSS you've posted (apart from the h1) doesn't appear to match the HTML? What styles are applied to "ad" and "abta"? I would have thought that all browsers should wrap the text inside the H1 if it doesn't fit. The H1 should fill the available width in all browsers - unless there is something else restricting it?

As lucy24 says :)


 10:15 am on Dec 16, 2011 (gmt 0)

This seems to affect crome and FF

The header is set up so that the ad div, floats right with the abta div (it's a sprite image) floating left but i cant get the adta div to move left to stop the hi breaking when the h1 text gets larger.

However rather oddly if you have more text under the h1 this does move everything left so the H1 will fit...

<div id="ad">
<div class='abta'>this is a sprite image</div><h1>Mediterranean <breaks here> holidays.</h1> Blah blah.<br> We are here to help you get the.<br> -<b>"Right</b> more blah blah!"
<div style="clear:both">



 11:28 am on Dec 16, 2011 (gmt 0)

Does the floated "abta" DIV have a width applied?

Does the <h1> text look as if it should all fit on 1 line? Apply a temporary border to your <h1> to check.


 11:43 am on Dec 16, 2011 (gmt 0)

Hi Penders

The h1 all looks fine in IE everything moves left to take more text but FF refues to budge...

The floated abta div is a sprite, how can i set a width?

.abta { background-position: -290px -0px; width: 32px; height: 42px; float:left; padding:0 0 0 4px;

If i do this <h1><div class='abta'></div> Some text</h1> it does work in FF but this is not realy a correct sollution.


 5:06 pm on Dec 16, 2011 (gmt 0)

Set white-space:nowrap on your h1.


 10:06 pm on Dec 16, 2011 (gmt 0)

The floated abta div is a sprite, how can i set a width?
.abta { background-position: -290px -0px;
width: 32px; height: 42px; float:left; padding:0 0 0 4px; }

It looks like you already are, on the .abta class at least.

However, I think you need to set a width on your floated #ad container to give the H1 enough room. Yes, there does appear to be a difference between IE and Firefox/Chrome in this respect. IE is expanding the floated container to fully accommodate its contents (the floated .abta and H1 elements), but Firefox/Chrome are ignoring the width of the floated .abta element (it is after all taken out of the flow of the page) and the width of #ad is determined solely by the H1 which flows behind the .abta element, but the text is pushed right and therefore does not fit in #ad.

white-space:nowrap as lucy24 and rocknbil suggest does indeed prevent the text from wrapping, but (for reasons I cannot fathom) this does not expand the width of the #ad container. The H1 text simply overflows the H1 and the container. However, adding enough text after the H1 does expand the #ad container and the H1 text fits! The additional text wraps AND expands the container - not particularly predictable as far as I can see?!

Setting a width on your floated #ad container seems to resolve these issues and makes it consistent cross browser.


 8:20 am on Dec 17, 2011 (gmt 0)

Thanks Penders rocknbil lucy24

Much appreciated, in the end i set a width on the ad div not perfect as i had to set a generic size. Damn that FF lol


 9:25 am on Dec 17, 2011 (gmt 0)

Some of y'all may remember that for a while the w3c CSS validator insisted on an explicitly declared width for floats. (They now seem to have given up the idea.) Didn't do much good of course if the value you chose to set was "auto", meaning "do exactly what you would have done if I hadn't said anything".* Maybe they were hoping nobody would think of that. The validator is just a dumb machine, so it can't tell that you're cleverly sidestepping its rules.

* Where would CSS be without "auto" and "inherit"? ;)


 10:45 am on Dec 18, 2011 (gmt 0)

Hi Lucy24

width:auto does not work with FF grrr, does work rather nicely with IE..

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved