Chrome Vs. Firefox/IE Browser Rendering Issue

HTML & CSS
1

Hey guys,

I’m having a slight issue with a section on my site, I was wondering if you guys could clear help with it.

What happens is when I stack two divs on top of one another, they appear differently in Chrome and FF/IE.

In Chrome they just stack one on top of the other… There’s no space between the two. This is how I want it to look.

In FF and IE there’s a space between the two… I can’t get it to close by eliminating margin or anything like that.

How it appears in Chrome (and how I want it to appear in all browsers):

1676×815 238 KB

How it appears in Firefox and IE (the arrow pointing is to illustrate the space I was talking about):

1635×943 281 KB

Does anyone know why FF/IE is rendering this differently from Chrome?

CSS Below:

body {
margin: 0;
padding: 0;
background-image: url(‘bg.jpg’);
width: 100%;
}

#container {
width: 70%;
background-color: white;
min-height: 100%;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
opacity: 0.92;
}

#header {
width: 70%;
height: 50px;
background-color: black;
margin: 0;
padding: 0;
opacity: 0.8;
position: fixed;
}

#header ul {
float: right;
}

#header ul li {
display: inline;
color: white;
font-family: verdana;
margin: 10px;
}

#section {
width: 70%;
margin: 0px auto;
}

h1 {
font-family: georgia;
font-size: 80px;
text-align: center;
}

h2 {
font-family: verdana;
font-size: 26px;
text-align: center;
}

h3 {
font-family: georgia;
font-size: 30px;
text-align: center;
color: white;
margin-bottom: 5px;
}

h4 {
font-family: verdana;
font-size: 26px;
}

p {
text-align: center;
}

p1{
font-family: Georgia;
font-size: 20px;
font-weight: bold;
}

p2{
font-family: Verdana;
font-size: 14px;
}

p3{
font-family: Verdana;
font-size: 14px;
color: white;
}

#left {
width: 45%;
float: left;
word-break:break-all;
}

#right {
width: 45%;
float: right;
word-break:break-all;
}

.icon {
display: block;
margin-left: auto;
margin-right: auto
}

#about1 {
background-color: black;
width: 100%;
height: 30%;
margin: 0px auto;

}

#about2 {
background-color: grey;
width: 100%;
height: 400px;
margin: 0px auto;
border: none;
}

.picture {
width: 20%;
height: 200px;
text-align: center;
padding: 1%;
}

2

could you post the HTML as well? The error could just as likely be there.

3

Do you have a reset in your CSS? If not, consider adding one.

Although it’s really impsosible to tell without a re-creatable example to go off of. We can’t reproduce your issue with CSS alone.

4

Hi, Andy Button.

Do you know how to create a working page that demonstrates the issue?

If not, you can click the link in the footer of this post and read out posting guidelines.

In short, a working page is a complete file (starts with <doctype, ends with </html>) and contains everything necessary to demonstrate the problem (ideally nothing more, nothing less).

After you have created the file, you can copy the code into the body of a post by putting it between [noparse]

 ...

[/noparse] tags. You can click the “#” symbol at the right end of the menu in the “Reply” message box and that will type them on the page for you. Easy. (Actually, you should put any code that you post between “code” tags.) We can then copy the content of that code box into a new file on our computers and should see exactly what you see.

In summary, create a standalone working page that demonstrates what you see, then post it in a message between “code” tags. With a working page in hand, we’ll be good-to-go to pitch in and help buttonhole the problem. :slight_smile:

Thanks

5

Sure thing. I usually use external style sheets but this seems to work OK.


<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body {
margin: 0;
padding: 0;
background-image: url('bg.jpg');
width: 100%;
}

#container {
width: 70%;
background-color: white;
min-height: 100%;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
opacity: 0.92;
}

#header {
width: 70%;
height: 50px;
background-color: black;
margin: 0;
padding: 0;
opacity: 0.8;
position: fixed;
}

#header ul {
float: right;
}

#header ul li {
display: inline;
color: white;
font-family: verdana;
margin: 10px;
}

#section {
width: 70%;
margin: 0px auto;
}

h1 {
font-family: georgia;
font-size: 80px;
text-align: center;
}

h2 {
font-family: verdana;
font-size: 26px;
text-align: center;
}

h3 {
font-family: georgia;
font-size: 30px;
text-align: center;
color: white;
margin-bottom: 5px;
}

h4 {
font-family: verdana;
font-size: 26px;
}

p {
text-align: center;
}

p1{
font-family: Georgia;
font-size: 20px;
font-weight: bold;
}

p2{
font-family: Verdana;
font-size: 14px;
}

p3{
font-family: Verdana;
font-size: 14px;
color: white;
}

#left {
width: 45%;
float: left;
word-break:break-all;
}

#right {
width: 45%;
float: right;
word-break:break-all;
}

.icon {
display: block;
margin-left: auto;
margin-right: auto
}

#about1 {
background-color: black;
width: 100%;
height: 30%;
margin: 0px auto;

}

#about2 {
background-color: grey;
width: 100%;
height: 400px;
margin: 0px auto;
border: none;
}

.picture {
width: 20%;
height: 200px;
text-align: center;
padding: 1%;
}
</style>
</head>
<body>

<div id= "container">
<header id="header">
<img src="logo.png" />
<ul> 

<li>About</li>

<li>Services</li>

<li>Contact</li>

</ul>
</header>
<section id ="section">
<h1>About Urban Digital</h1>
<h4>hello</h4>
<div class="picture">
<img src="citysmall.png" />
</div>
<div id="about1">
<h3>Our philosophy at a glance.</h3>
</div>
<div id="about2">
<p3>This is a test.
<br>
This is a test.
<br>
This is a test.
<br>
This is a test.
<br>
This is a test.
<br>
This is a test.
<br>
This is a test.
<br></p3>
</div>


</section>
<footer>
</footer>
</div>


</body>
</html>
6

You have a strange margin collapse issue here. Also you have added 5px of bottom margin, which is what is actually causing the gap (in other words, according to your code you would WANT the gap). removing the margin closes up the gap in both Saf and FF.

I was also curious. why do you have selectors based around invalid tags, e.g. P2s, P3s?

7

I’m not sure what you mean? These tags when styled with CSS do indeed result in paragraphs with different styled text…

8

It’s just a simple margin collapse. A 1px bottom padding or 1px bottom border on #about1 would be sufficient.

9

I’m not sure what you mean? These tags when styled with CSS do indeed result in paragraphs with different styled text…

Thats because CSS can also be used for styling XML which has no defined set of tags.

HTML does have a defined set of structural and semantic tags, any other tags are not valid… even if they display ok. Since you have declared your doc to be HTML, you musts stick to the set of tags/attributes defined there in.

10

Hi, Andy Button. A few notes…

I have a theory or two about how those “custom” p tags came about.

#1. New coder sees numbered “h” tags (heading tags); thinks, “This is good; ‘p’ tags must work the same way”. Makes up “p1, p2, p3, etc.” Browser responds to them and he is happy.

#2. New coder was reading someone’s CSS and found .p1 {…}, .p2 {…}, .p3 {…}; but (since he favors IDs) overlooked the leading “dot” indicating that these were classes. That oversight reinforced the “numbered ‘p’ tag idea”.

:slight_smile:

Regarding the margin-collapse thing. dresden_phoenix recommended removing the margin. Depending on how you interpret that, you might be tempted to delete {margin-bottom:5px} which would not be the intent of the advice. Changing it to {margin-bottom:0} (or better still, {margin:0}) would override/“reset” the default top and bottom margins on the <h3> element.

After doing that, you could actually delete the #about1 box by adding the appropriate styles to the <h3> tag. After all, it’s already a block object. Something like this:


h3 {
    background-color:black;
    font-family:georgia;
    font-size:30px;
    text-align:center;
    color:white;
    margin:0;  /* the "reset" */
}



...
        <div class="picture">
            <img src="citysmall.png" alt="" width="" height="">
        </div>
        [color=blue]<h3>Our philosophy at a glance.</h3>[/color]
        <div id="about2">
            <p3>
...

Note the empty alt, width, and height attributes above. They should be given the appropriate values.

The article that @RyanReese links to describes several methods of containing margins; ie, preventing them from escaping. Recommended reading :slight_smile:

I noticed that you have assigned a width to the body tag. Usually, that’s unnecessary. In fact, remember that block objects will fill the full width of the available space by default (unless they have been assigned a restricting width), so assigning {width:100%} is usually unnecessary and in some cases can be problematic.

The <ul> tag in #header has not been “reset”. In other words, it still carries its default top and bottom margins plus left padding. When creating a horizontal alignment using list items, most coders will apply a reset to the <ul> tag:


ul {
    padding:0;  /* overrides the default padding-left */
    margin:0;  /* overrides the default margin-top and margin-bottom */
}

I would guess that you chose the height of the header so the list items would be vertically centered in the row. If you have Firefox, try zooming text-only larger and smaller and observe how the position of the menu text changes. You may wish to use a different technique for your menu if you want the menu text to remain “middled” at different font sizes (user’s control).

I’m not familiar with the developer tools in browsers other than Firefox (would love to learn Chrome’s). I strongly recommend that you start becoming familiar with the tools in whatever browser you prefer. Things like escaping margins and much more really become obvious when colored by the tools.

</notes>

Cheers :slight_smile:

11