...

View Full Version : css problem



peterx
03-20-2007, 11:16 AM
Hi!
Why Do I get different result with IE och FireFox




#container{
float:left;
width:600px;
height:400px;
margin:5px;
}
#content1{
float:left;
width:60px;
height:40px;
margin:5px;
}
#content2{
float:left;
width:60px;
height:40px;
margin:5px;
}
#content3{
float:left;
width:60px;
clear:left;
height:40px;
margin:5px;
}
#content4{
float:left;
width:60px;
height:40px;
margin:5px;
}
<div id= “container” >

<div id= “content1” > </div>
<div id= “content2” > </div>
<div id= “content3” > </div>
<div id= “content4” > </div>

</div>

jlhaslip
03-20-2007, 12:10 PM
Because IE messes up positioning on floats.

http://www.brunildo.org/test/#ief

Take your pick of solutions ...

and empty div's have nothing to show. Both IE6 and FF2 display the same blank page for me...
Perhaps a live demo would be in order. One with content and a Doctype, maybe???

ahallicks
03-20-2007, 12:27 PM
Just curious as to why you have floated the container element? You shouldn't need to worry about that.

IE 6 adds it's own padding and margin to elements on the page, so does Firefox and all the other browsers. THis means that things are going to look a little different in each browser.

One way to help this is the add the * selector to zero out all margins and padding, although you should be warned that it does so on everything including <p> tags, forms and tables. These will need to be redefined by you in the CSS:

* {
margin: 0;
padding: 0;
}

karinne
03-20-2007, 03:34 PM
One way to help this is the add the * selector to zero out all margins and padding, although you should be warned that it does so on everything including <p> tags, forms and tables. These will need to be redefined by you in the CSS:

* {
margin: 0;
padding: 0;
}

or just set it like


html, body, p, ul, ol, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}


and put all the elements you want to reset the margins and padding to 0

See No Margin For Error (http://www.search-this.com/2007/03/12/no-margin-for-error/) and scroll down 'til you get to "Global White Space Reset" and keep reading :)

thedeadpress
03-20-2007, 04:53 PM
Firefox really rips my css based design apart. URL is www.thezonerocks.ca
Anyone have any insight?? I believe it's with my float. I also see firefox gets rid of my padding (doh!) any way to get it to recognize this? I am a bit of a newcomer to css so any help is appreciated.

ahallicks
03-20-2007, 05:17 PM
Ermm... to the guy above... try a proper doctype declaration first:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

and it's most likely IE that is doing things wrong... add the * selector to the beginning of your stylesheet and see what it looks like then

thedeadpress
03-20-2007, 06:20 PM
Ermm... to the guy above... try a proper doctype declaration first:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

and it's most likely IE that is doing things wrong... add the * selector to the beginning of your stylesheet and see what it looks like then

Thanks! I will add the doctype declaration. I am not sure what you mean by adding a * selector . . . can you elaborate?

karinne
03-20-2007, 06:31 PM
See the posts above.

thedeadpress
03-20-2007, 06:41 PM
Okay, thanks all! First time poster here so I appreciate the insight! I see how the * selector works . . . . but I really need that padding to make my design all pretty :) Is it better to work without padding and margins? No way to get them to display in firefox?

jlhaslip
03-20-2007, 07:23 PM
The concept is to eliminate all margin and padding the Browser uses by default and then re-apply the margin and padding you need to those elements which require it to accommodate your design.

Trust us, it works.

thedeadpress
03-20-2007, 07:55 PM
Thanks again to all for the info and help . . . I will try out these techiques tonight and maybe post the results tomorrow . . . thanks again!

Matt
www.annunaki.net

Arbitrator
03-20-2007, 07:56 PM
Ermm... to the guy above... try a proper doctype declaration first:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">I would not solely recommend the XHTML DTD to people. Internet Explorer doesn’t support it, so most authors, which insist upon support for that browser, get little to no benefit from using it. Instead, they get a bunch of strict rules that they probably won’t bother to follow.

To the OP, I recommend that you use a full document type declaration—with a URL at the end—to get your page out of quirks mode; check the second set of resources below for information pertaining to that mode. The first resource lists all of the W3C DTDs.

Related Resources (Copied and Pasted):

Recommended DTDs to Use in Your Web Document (http://www.w3.org/QA/2002/04/valid-dtd-list.html) provides a list of W3C document type (doctype) declarations that you can use in your documents. I’d recommend that you use HTML 4.01 Strict; if you’re up for more of a challenge or know XML, XHTML 1.0 Strict is also suitable.
Activating the Right Layout Mode Using the Doctype Declaration (http://hsivonen.iki.fi/doctype/) and Quirks Mode and Strict Mode (http://www.quirksmode.org/css/quirksmode.html) provide information concerning standards‐compliance and quirks modes and which doctype declarations trigger which mode.
After you’ve added a doctype declaration, validating your document against it ensures that your (X)HTML code is valid according to the chosen doctype. Validation services include the Validome Validator (http://www.validome.org/) and the W3C Markup Validator (http://validator.w3.org/); I’d recommend the former since it catches errors with more precision (http://www.validome.org/lang/en/errors/ALL) than the official (latter) validator.

Thanks! I will add the doctype declaration. I am not sure what you mean by adding a * selector . . . can you elaborate?The asterisk is referred to as the universal selector. It represents all elements. For example, the selector p * would select all elements that are descendants (inside) of all paragraph elements (the space in between them is called the descendant combinator).


Is it better to work without padding and margins? No way to get them to display in firefox?Firefox supports padding and margins fine. The point of setting them to zero from the outset is to avoid inconsistencies in browser defaults. For example, Firefox gives list elements a default left padding whereas Internet Explorer gives them a default left margin. You specify zero margins and padding so that there are no surprises and you know what the defaults are for all browsers: zero margins and zero padding.

Some people end up doing this by declaring zero margins and padding on every element that they use and then set them. This is inefficient. Using the method ahallicks noted, you only have to do this once.

As an additional issue, you may want to consider the semantics of your code. Last time I checked, “south of the Totem Store,” did not constitute a paragraph. This would probably be more semantic:


<p><span>Book the VIP room for your next night out!</span>
<span>Call The Zone @ 352 – 8825 for details.</span>
<span>The Zone is located on <abbr title="Gaetz Avenue">Gaetz Ave</abbr> and <abbr title="77th Street">77th St</abbr>, just</span>
<span>south of the Totem Store.</span></p>

The CSS rule might look like:

abbr {
border: 0 none;
}
p span {
display: block;
}

thedeadpress
03-20-2007, 09:28 PM
Thanks for the additional advice. I am getting more familar with doctypes now, I will look into it tonight and try to find an appropriate one for my site.

On a side note, notice my calender in the sidebar. This is a CSS based popup design . . . yet it does not work in IE6 (or earlier, I believe). Any way to get around this without using javascript?

Anyways, again ,thanks for the help, this is my first major site for a client, just trying to get it as good as possible for them.

Matt
www.annunaki.net



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum