CODEWITHSUNDEEP
htmlcssfirefoxgoogle-chrome
marius2k12
marius2k12

Reputation: 1101

HTML elements with different heights in different browsers

I'm fooling around with HTML and CSS a little and i encountered an issue i cant seem to resolve.

The upper part is Firefox, which displays it the way I want it to.

Below that is Chrome (IE shows it like Chrome). As you can see, the yellow parts height isn't enough for the picture.

Here's the code:

<section id="top-content">
  <div id="top-content-upper">
    <h2>Welcome to our Site</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
      ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
      dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies
      nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
      Donec pede justo, fringilla vel, aliquet nec, vulputate Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
      Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
      montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
      pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
      pede justo, fringilla vel, aliquet nec, vulputate
    </p>
    <a href="#">Learn More</a>
    <a href="#">Our Work</a>
  </div>

  <img src="dragon.jpg" alt="dragon" id="featured1" />
  <img src="underconstrcution.jpg" alt="under construction" id="featured2" />

  <div id="breadcrumbs">Youre here: Home > Welcome</div>
</section>

and the CSS:

#top-content {
  background: green;
  padding: 20px 10px;
  position: relative;
}
#top-content-upper {
  background: yellow;
  padding: 15px 50% 15px 10px;
}
#top-content-upper h2 {
  margin-bottom: 15px;
}
#breadcrumbs {
  background: red;
  padding: 5px 0 5px 15px;
}
#featured1 {
  position: absolute;
  top: 40px;
  left: 600px;
  z-index: 2;
}
#featured2 {
  position: absolute;
  top: 80px;
  left: 640px;
  z-index: 1;
}

Thanks alot for all the answers. For now i solved it using min-height. Im going to try floating though. And thanks for the link to the box sizing article

Upvotes: 0

Views: 4198

Answers (3)

Chet
Chet

Reputation: 22065

Browsers do not have to render things like text identically. There could be minor differences in text size, spacing, and flow that could affect how much vertical space the text takes up.

What you have are two different positioning models. The text on the site is positioned using relative positioning, which is fine. That means things will flow if the user modifies their font size or something like that. Your images are positioned using absolute positioning, meaning they will stay at those exact pixel coordinates no matter how big the text is set to be. These objects are positioned entirely differently and won't affect each other or pay attention to the boxes they are "in."

If you want them to float on top of anything else, that's fine, but you're probably going to want to avoid absolute positioning based on your use case and use something like a float:right.

Another answer was to use min-height. This is a fine solution, but it doesn't really change the fact that the boxes are on entirely different positioning schemes.

Upvotes: 1

t0nyh0
t0nyh0

Reputation: 680

The css attribute box-sizing was created to address this specific issue. All three of the major browsers calculate heights differently. By using box-sizing, you can get a little more consistency and then set the height of the yellow box to accommodate both images.

Read more about box-sizing here: http://css-tricks.com/box-sizing/

P.S. I'd recommend using modernizer (http://www.modernizr.com) to help with outdated browsers like IE7 with new HTML/CSS features such as box-sizing

Upvotes: 0

AshBrad
AshBrad

Reputation: 492

I had a similar problem I resolved with 

 min-height: (height)px;

Upvotes: 0

Related Questions