18 replies [Last post]
Greg-J.com
Offline
Enthusiast
Last seen: 12 years 40 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

I couls use some help on a site I'm developing. The page is:

http://www.prntscrn.net

Viewed in IE it displays 'correctly' in that it is how it is meant to be displayed. However, if you view it in FF or Opera, the results are less than desirable. I spent about 20 minutes searching through the code and couldn't find the cause of the problem, so I turn to you now.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE strikes again with 2px of vengance

Rule #1: Develop in Firefox and fix for IE. Its much much easier that way. IE has lots of idiosyncrosies and most of the time you aren't fixing things for Firefox, Opera, Safari, etc, but trying to fix IEs problems looking at other browsers - which is kind of backwards Smile

For this:

- you need to clear the footer; #footer {clear:both;}
- either, unfloat #myRight, or assign widths to both #myRight & #myLeft
- assign an overflow value (auto or hidden) to #myContainer or apply the clearfix.

larmyia
Offline
Elder
London
Last seen: 13 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

IE strikes again with 2px of vengance

having a quick look at your site I'm taking a wild guess that you developed it for IE and then took a look in FF???

tbh you really need to develop for FF and then work out the bugs in IE. often things "work" in IE because IE does not work properly. therefore your code is at fault not FF.

I think if you clear your footer it'll go below the main content. but like I said most of your problems are down to IE.

larmyia

Greg-J.com
Offline
Enthusiast
Last seen: 12 years 40 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

IE strikes again with 2px of vengance

Thanks for the help guys. Interestingly enough I always develop for FF and then check IE when I'm done. The site was nearly unreadable in IE so I went on with the fixing. . . Once it was fixed for IE, well, you can see what it looks like now. I'll make those changes and see what comes up.

Could someone please explain this:
- assign an overflow value (auto or hidden) to #myContainer or apply the clearfix.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 16 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

IE strikes again with 2px of vengance

See http://www.w3.org/TR/CSS21/visudet.html#q22 and the following section. When overflow is other than the default 'visible', the element's auto height will will enclose its child floats. This also true of an element of {display: table;}. The latter is not grokked by IE, but its buggy behavior is to enclose its floats if the the element has 'layout', eg has width or height.

The clearfix method adds an explicit clear property just prior to the element end.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Greg-J.com
Offline
Enthusiast
Last seen: 12 years 40 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

IE strikes again with 2px of vengance

Is it just me, or is it really silly that there isn't an easy way to order floats? It just doesn't make any sense to me that you have to go through all this trouble just to have a two column layout when something as simple as ordered floats would make everyones life a lot easier.

i.e.

.style1 {
	float-position: 1;
	width: 250px; 
	border: 1px solid #000000;
	}
.style2 {
	float-position: 2;
	width: 250px; 
	border: 1px solid #000000;
	}
.style3 {
	float-position: 2;
	width: 250px; 
	border: 1px solid #000000;
	}

<div class="style1">left</div>
<div class="style2">middle</div>
<div class="style3">right</div>

That just seems to make sense to me. A lot more sense than having to use this method: http://glish.com/css/7.asp

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 16 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

IE strikes again with 2px of vengance

Using floats to create columns is similar to the use of tables for layout. They both push the intent of the element or property. In both cases, they're a work-around 'til something more appropriate comes along. Table layouts have been supplanted by css. The float column is a work-around for the majority PoS browser that doesn't support css2, a nearly 7yo standard. On the bright side, I don't think nearly as many of us would have nearly as good an understanding of floats otherwise. Smile

Consider this banner+3-col+footer example;

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

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content="
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
        
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />

  <title>Three Columns for Modern Browsers</title>
<style type="text/css">
  /*<![CDATA[*/

  html, body {
    margin: 0;
    padding: 0;
    }

  body {
    background-color: #888;
    color: black;
    }

  p {
    font-size: 1em;
    margin: 1em 10px;
    }

  h1, h2, h3 {
    text-align: center;
    }

  #wrapper {
    width: 90%;
    margin: 1em auto;
    max-width: 60em;
    border: 1px solid black;
    background-color: #88f;
    }

  #main { opacity: .8;
    display: table;
    margin: 0 10px;
    border: 1px solid black;
    border-spacing: 10px;
    background-color: #8f8;
    }

  #col1, #col2, #col3 {
    display: table-cell;
    border: 1px solid black;
    }

  #col1 {
    width: 20%;
    background-color: #8ff;
    }

  #col2 {
    background-color: #f88;
    }

  #col3 {
    width: 20%;
    background-color: #f8f;
    }

  .box {
    margin: 1em 10px;
    border: 1px solid black;
    background-color: #fff;
    -moz-border-radius: 10px;
    }

  /*]]>*/
</style>
</head>

<body>
  <div id="wrapper">
    <h1>Generic Banner Logo</h1>

    <div id="main">
      <div id="col1">
        <h2>Menu</h2>

        <ul>
          <li>menu item</li>

          <li>menu item</li>

          <li>menu item</li>

          <li>menu item</li>

        </ul>
      </div><!-- end col1 -->

      <div id="col2">
        <h2>Main Content</h2>

        <h3>Part 1</h3>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Mauris accumsan, magna vel feugiat rhoncus, ligula pede
        pulvinar urna, eu fermentum nunc magna sed purus. Maecenas nec
        sapien. Etiam a diam. Pellentesque habitant morbi tristique
        senectus et netus et malesuada fames ac turpis egestas.</p>

        <h3>Part 2</h3>

        <p>In sit amet ante in pede consectetuer congue. Maecenas quam.
        Nam ac velit. Vivamus lorem orci, convallis sit amet, porta
        sed, cursus in, tortor. Nulla facilisi. Maecenas malesuada,
        sapien eu vehicula ultrices, nisl dolor sagittis orci, in
        varius nulla libero at magna. Fusce a sapien at pede nonummy
        scelerisque. Suspendisse wisi pede, bibendum quis, adipiscing
        quis, sollicitudin non, eros.</p>
      </div><!-- end col2 -->

      <div id="col3">
        <h2>News items</h2>

        <div class="box">
          <p>some bit of gossip</p>
        </div>
      </div><!-- end col3 -->
    </div><!-- end main -->

    <p>©2005</p>
  </div><!-- end wrapper -->

</body>
</html>
It works just fine in modern browsers. IE is not a modern browser, so we work around it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

IE strikes again with 2px of vengance

Greg-J.com wrote:
A lot more sense than having to use this method: http://glish.com/css/7.asp

This is a much better example of source-ordered columns.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Greg-J.com
Offline
Enthusiast
Last seen: 12 years 40 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

IE strikes again with 2px of vengance

You guys have been very helpful. Thank you. I have a much better understanding of floats now.

Greg-J.com
Offline
Enthusiast
Last seen: 12 years 40 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

IE strikes again with 2px of vengance

IE is back at it again. Here is my problem:

As you can see, IE adds an extra 2px of padding to the bottom of myRightImage. I've added background color to make it easier to see. Yet FF and Opera display it correctly. Imagine that.

Any ideas?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 16 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

IE strikes again with 2px of vengance

IE preserves a linebox for any block element. That means the image, which defaults to a baseline vertical alignment, will have enough space under it for letter descenders; your 2 px.

Either do img {vertical-align: bottom;} or img {display: block;}.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Greg-J.com
Offline
Enthusiast
Last seen: 12 years 40 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

IE strikes again with 2px of vengance

It's nice when you get the fix. But it's great when you get an explanation. I only hope I can give back when I get good enough to do so.

Cheers!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

IE strikes again with 2px of vengance

Greg, it's best if you don't edit out your problems as others may read this thread in the future and not be able to benefit fully from the explanation given.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Greg-J.com
Offline
Enthusiast
Last seen: 12 years 40 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

IE strikes again with 2px of vengance

Good call. I've given it a permanent home. Hope this helps someone.

Greg-J.com
Offline
Enthusiast
Last seen: 12 years 40 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

IE strikes again with 2px of vengance

Same site, new issue. And since I can explain it just as well as showing it, I'd rather not spam the project I'm working on.

I'm trying to create a div that is only 10px (5px on either side) wider than the image contained within it with a min-width of 670px. It seems no matter what I do, the div always stretches the entire width of the page.

#container {
	width: auto;
	margin: 5px auto 0px auto;;
	padding: 5px;
	border: 1px solid #9d9d9d;
	-moz-border-radius: 8px;
	}	

<div id="container">
{% some information here, possibly in its own div &}
<img />
{% some information here, possibly an advertisement %}
</div>

As I'm sure you can tell, the div stretches the entire width of the page. The width of the content above the image and below the image will always be 728px wide, and will need to be centered. I've searched, but as many of you know - wording these things can be tricky. As does finding a similar answer.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

IE strikes again with 2px of vengance

Is the image the only thing in the container? If so, you can apply your styling (border, background colour, padding etc.) directly to the image and then you won't have to specify a width in your CSS as it'll take it from the dimensions in the HTML.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Greg-J.com
Offline
Enthusiast
Last seen: 12 years 40 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

IE strikes again with 2px of vengance

That's what I was originally doing, but I've decided that above and below the image I also want to include a description of the image and an advertisment. I've looked into using javascript getimagewidth()--getelementwidth() and setting the div width with that method, but I was hoping there was a cleaner approach to accomplishing it.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

IE strikes again with 2px of vengance

I think some scripting might be your only option then.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE strikes again with 2px of vengance

Just to clarify your requirements.

You have a div (lets call it #box),
- #box will contain an image and may possibly contain some other content above and below the image.
- #box has a min-width of 670px.
- #box should be 10px wider than the image
- you don't know the width of the image
- #box needs to be centred within its container
- the image should be centred within #box.

I think your best bet is to determine the size of the image in your page generating script and to set the width of the #box as an inline style.