css and firefox

@chedderMay 20.2005

I’ve been working on a new layout for my site. It looked fine in IE6 but when I checked it in Firefox it was all off.

~~[url]~~www.elemental-art.com/css/links.html[/url]
the stylesheet ~~[url]~~www.elemental-art.com/css/mystyle.css[/url]

to post a comment

25 Comments(s) _↴

@CharlesMay 20.2005 — #See http://validator.w3.org/check?verbose=1&uri=http%3A//www.elemental-art.com/css/links.html and http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.elemental-art.com/css/links.html . Clean up all of those errors and then give it a go.

@reagan123May 20.2005 — #edited due to a better answer ^{^^{^^{^^{^^{^}}}}}

@bokehMay 20.2005 — #Here's a start:

[code=html]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>Elemental: Everything you need</title>
 <meta http-equiv="Content-Type" content=
 "text/html; charset=us-ascii" />
 <link rel="stylesheet" type="text/css" href="mystyle.css" />
 </head>
 <body>
 <div class="container">
 <div class="header"><a name="top" id="top">an image will go
 here</a></div>
 <div class="nav"><a href="index.html">main</a> <a href=
 "gallery.html">gallery</a> <a href="info.html">info</a> <a href=
 "links.html">links</a></div>
 <div class="content">This site is link free. Save one of the
 images below to your own computer. Let me know if you linked to
 me and we can discuss an exchange.<br />
 http://www.elemental-art.com<br />
 <div class="banner"><img src="links/elban6.jpg" border="0"
 height="40" width="200" alt="Elemental Banner" /><img src=
 "links/elban8.gif" border="0" height="40" width="200" alt=
 "Elemental Banner" /><br />
 <img src="links/elban9.gif" border="0" height="40" width="200"
 alt="Elemental Banner" /><img src="links/elban10.gif" border="0"
 height="40" width="200" alt="Elemental Banner" /><br />
 <img src="links/selban01.gif" border="0" height="31" width="88"
 alt="Elemental Banner" /><img src="links/selban02.gif" border="0"
 height="31" width="88" alt="Elemental Banner" /></div>
 <p>Artists</p>
 <div class="banner"><a href=
 "http://www.commonastherain.com/eros.html" target=
 "_blank"><img src="links/ebanner6.gif" height="40" width="200"
 alt="eros" border="0" /></a> <a href="http://www.estrigious.com/"
 target="_blank"><img src="links/stgs11.jpg" height="40" width=
 "200" border="0" alt="Estrigious" /></a><br />
 <a href="http://www.eagle.ca/~cadams/lex.htm" target=
 "_blank"><img src="links/airaid1.gif" height="40" width="200"
 border="0" alt="Kitsch" /></a> <a href=
 "http://www.o-nigiri.com/hg/" target="_blank"><img src=
 "links/banhg02.jpg" width="200" height="40" border="0" alt=
 "Holygarden" /></a><br />
 <a href="http://www.lunatique-anamnesique.com/lunatique.html"
 target="_blank"><img src="links/banner3.jpg" width="200" height=
 "40" border="0" alt="Lunatique" /></a> <a href=
 "http://www.weewung.com/" target="_blank"><img src=
 "links/banner.gif" width="200" height="40" alt="Weewung" border=
 "0" /></a><br />
 <a href="http://www.mutesoul.net/" target="_blank"><img src=
 "links/msbanner.jpg" width="200" height="40" alt="Mute Soul"
 border="0" /></a> <a href="http://art.neoterranean.com" target=
 "_blank"><img src="links/prosaes-banner.gif" width="200" height=
 "40" border="0" alt="Pros[thetic] Aes[thetic]" /></a><br />
 <a href="http://rhodes.design-culture.net" target=
 "_blank"><img src="links/banner_mrhodes01.gif" width="200"
 height="40" border="0" alt="Matt Rhodes" /></a> <a href=
 "http://www.thinkling.org/" target="_blank"><img src=
 "links/pinkheart_01.gif" width="200" height="40" border="0" alt=
 "th.ink.ling" /></a><br />
 <a href="http://www.big-big-truck.com/" target="_blank"><img src=
 "links/bbtban1.jpg" width="200" height="40" border="0" alt=
 "Big Big Truck" /></a> <a href="http://www.aimostudio.com/"
 target="_blank"><img src="links/link-banner.jpg" width="200"
 height="40" border="0" alt="Aimo Studio" /></a><br />
 <a href="http://www.barachan.com/" target="_blank"><img src=
 "links/bbtn_kirby1.gif" height="30" width="87" border="0" alt=
 "Bara-chan's Cybergarden" /></a> <a href=
 "http://www.stringsoffate.com" target="_blank"><img src=
 "links/sofbanner_smmao2.jpg" width="88" height="31" border="0"
 alt="Strings of Fate" /></a></div>
 <p>Other</p>
 <p>Art related:<br />
 <a href="http://www.eatpoo.com/phpBB2/" target="_blank" class=
 "dark">Eatpoo</a><br />
 <a href="http://www.costumes.org/" target="_blank" class=
 "dark">Costumer's Manifesto</a><br />
 <a href="http://www.livejournal.com/community/pantsketch/"
 target="_blank" class="dark">Pants Press</a><br />
 <a href="http://www.deviantart.com/" target="_blank" class=
 "dark">DeviantART</a></p>
 <p>Music:<br />
 <a href="http://www.remyzero.com/" target="_blank" class=
 "dark">Remy Zero</a><br />
 <a href="http://www.p-o-e.com/index.php" target="_blank" class=
 "dark">Poe</a><br />
 <a href="http://www.herroyalmajestysrecords.com/" target="_blank"
 class="dark">Bif Naked</a><br />
 <a href="http://www.stabbingwestward.com/index1.html" target=
 "_blank" class="dark">Stabbing Westward</a><br />
 <a href="http://www.enjoyincubus.com/" target="_blank" class=
 "dark">Incubus</a><br />
 <a href="http://www.ourladypeace.com/background.html" target=
 "_blank" class="dark">Our Lady Peace</a><br />
 <a href="http://www.aperfectcircle.com/" target="_blank" class=
 "dark">A Perfect Circle</a><br />
 <a href="http://www.rufuswainwright.com/rufus_splash.html"
 target="_blank" class="dark">Rufus Wainwright</a></p>
 <p>HTML:<br />
 <a href="http://www.webmonkey.com/" target="_blank" class=
 "dark">Webmonkey</a><br />
 <a href="http://htmlgoodies.earthweb.com/" target="_blank" class=
 "dark">HTML Goodies</a><br />
 <a href="http://www.bluerobot.com/" target="_blank" class=
 "dark">Blue Robot</a><br />
 <a href="http://www.dreamhost.com/r.cgi?kyoko638" target="_blank"
 class="dark">Dreamhost</a> - webhosting</p>
 </div>
 <div class="footer">
 <div class="top"><a href="#top">top</a></div>
 </div>
 </div>
 </body>
 </html>
 
 [/code]

@chedderauthorMay 20.2005 — #I changed a bunch of things (closed tags, caught a bunch of tags I forgot to lowercase, added a DOCTYPE). I'm a little confused about the character encoding. But I still have the problem where, in Firefox, the container doesn't extend to enclose all the content. The footer (the borders and the text) also breaks out of the container (It's started to do this in IE as well). I don't know enough about CSS to fix it. I've played around with different things but it just causes more problems.

@bokehMay 20.2005 — #Ok! Try the following and report back:

Replace this:

.container {

position : absolute;

left : 25%;

width : 50%;

height : 100%;

margin : 0;

border : 1px solid inherit;

border-top-width : 0;

border-bottom-width : 0;

}

with this:

.container {

position : absolute;

left : 25%;

width : 50%;

min-height : 100%;

margin : 0;

border : 1px solid inherit;

border-top-width : 0;

border-bottom-width : 0;

}

* html .container {

height: 100%;

}

By the way I would be using "id" not "class" for that div. Anyway try my suggestion before changing anything.

@chedderauthorMay 21.2005 — #It's so hard to make a site compatible on different browsers. The height is fixed in Firefox but now it doesn't fill the whole window in IE (at least for the index page, the pages that go beyond the main window extend). Then there's still the problem with the footer.

@drhowarddrfineMay 21.2005 — #I'm fairly new, too. I haven't looked at your code yet but one thing I will say is that Firefox is much more standards compliant than IE. So if it works in FF then you have to adjust for IE, never adjust for Firefox.

IE tends to guess at what you want and presents it that way. Like non-valid html code that "works". The problem is you could have an error in your code and not know it until someone in Firefox or Opera went to your site.

@drhowarddrfineMay 21.2005 — #Near the top of your html code you make a div inside a p. I'm not sure if that is allowed or "bad form". Is it?

@bokehMay 21.2005 — #Near the top of your html code you make a div inside a p. I'm not sure if that is allowed or "bad form". Is it?[/QUOTE]
I think you are confused. It's probable that <div> can not be the child of <p> ie:

<p><div></div></p>

but

<div><p></p></div>

validates OK at www.w3.org

@drhowarddrfineMay 21.2005 — #This is what I mean:

<p><div class="banner">

<img src="links/elban6.jpg" border="0" height="40" width="200" alt="Elemental Banner" />

<img src="links/elban8.gif" border="0" height="40" width="200" alt="Elemental Banner" /><br />

<img src="links/elban9.gif" border="0" height="40" width="200" alt="Elemental Banner" />

<img src="links/elban10.gif" border="0" height="40" width="200" alt="Elemental Banner" /><br />

<img src="links/selban01.gif" border="0" height="31" width="88" alt="Elemental Banner" />

<img src="links/selban02.gif" border="0" height="31" width="88" alt="Elemental Banner" /></div></p>

@drhowarddrfineMay 21.2005 — #I just ran it through the validator:

This page is not Valid XHTML 1.0 Transitional!

Below are the results of attempting to parse this document with an SGML parser.

Line 26, column 22: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

<p><div class="banner">

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

✉

Line 34, column 36: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

<p>Artists</p><p><div class="banner">

@bokehMay 21.2005 — #I miss read your post. We are both in agreement.

@chedderauthorMay 21.2005 — #I see what you're saying. I changed the order they're in. I also redid the css for the footer so that it doesn't break out of the container. Everything looks fine in Firefox. But I still need the container to fill the length of the page in IE for www.elemental-art.com/css/index.html

@bokehMay 21.2005 — #Add this to the CSS to sort out the height in IE

/* */

* html .container {

height: 100%;

}

/* */

@chedderauthorMay 22.2005 — #That isn't working for me. Or maybe I'm doing something wrong.

@bokehMay 22.2005 — #That isn't working for me. Or maybe I'm doing something wrong.[/QUOTE]
Put it in the CSS and leave it there so we can see what is happening!

@chedderauthorMay 22.2005 — #Okay, I uploaded it.

@bokehMay 22.2005 — #

[code=php]
 html.container {
 height: 100%;
 }
 [/code]

is not what I posted!

I posted this:

[code=php]
 /* */
 * html .container {
 height: 100%;
 }
 /* */
 [/code]

See the difference?

@chedderauthorMay 22.2005 — #That doesn't do anything. What does all that mean anyways?

@bokehMay 22.2005 — #It stops the instruction being seen by IE5 mac which does not miss understand 'height' like IE win.

What exactly is the problem? For me FF and IE display the page the same except for the font size. What version of IE are you using?

@chedderauthorMay 22.2005 — #I'm using IE6. On the main page (www.elemental-art.com/css/index.html) the container doesn't fill the length of the window. After the footer, it's just empty.

@bokehMay 22.2005 — #Your page works fine in IE if the DOCTYPE tag is removed from the html document. Strange but true! With the doctype tag inserted though height can only be specified using a pixel (px) value. Maybe one of the gurus knows how to get round this.

@BeachSideMay 23.2005 — #give your body a 100% height so that the browser knows how big the viewer is.

so in your body style where it is

[code=html]
 body {
 margin: 0;
 }
 [/code]

make it...

[code=html]
 html, body {
 height: 100%;
 margin: 0;
 }
 [/code]

@chedderauthorMay 23.2005 — #That worked! Oh, thank all of you guys so much. You've helped a lot.

@BeachSideMay 23.2005 — #Word to Big Bird! ?

Also in #CSS _↴

Float div columns wont fit in firefox CSS Browser Restore Alignment Problem Form controls problem

Success!

Help @chedder spread the word by sharing this article on Twitter...

Tweet This

css and firefox

25 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

css and firefox

25 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

25 Comments(s) _↴

Also in #CSS _↴