CSS Forum

**Foppa** · 06-03-2009, 07:53 PM

I floated an image to the left and when I did this it pushed three other images that were below it to the far right. They were nicely centered in their own divs but now are way off the page.

This is only happening in IE (i'm using IE 8). I can't figure out how to center them again in IE.

When I added the content-header in the code below, thats when it threw the three buttons to the right:

HTML Code:

#content-header {
    float: left;
    padding-top: 20px;
    clear: both;
}

#product-image {
    padding-top: 25px;
    padding-right: 10px;
    padding-left: 3px;
    float: right;
}

#buttons {
    display: block;
    width: 780px;
    position: absolute;
    top: 500px;
    text-align: center;
    margin: auto;
    clear: both;
}

#align-left {
    float: left;
    text-align: left;
    width: 260px;
}    

#align-center {
    float: left;
    text-align: center;
    width: 260px;
}

#align-right {
    float: left;
    text-align: right;
    width: 260px;
}

**LadynRed** · 06-03-2009, 11:42 PM

Are you having all the text inside #align-center and #align-right centered ???.. because that's what you have it set to.

Why do you have $buttons set to position:absolute ?

**Foppa** · 06-04-2009, 12:29 AM

Quote:

Originally Posted by LadynRed

Are you having all the text inside #align-center and #align-right centered ???.. because that's what you have it set to.

I won't be having text there at all. They're just images. Someone in another forum told me to do that to get my images centered.

Quote:

Originally Posted by LadynRed

Why do you have $buttons set to position:absolute ?

No idea really. I'm a newb. That's the only way I can figure out how to put things where I want them. What's the proper way to do it?

**angele803** · 06-04-2009, 12:56 PM

Can you post the html too?

**LadynRed** · 06-04-2009, 02:52 PM

Quote:

That's the only way I can figure out how to put things where I want them. What's the proper way to do it?

Use the normal document flow along with floats, margins and padding to put things where you want them.

Yes, we need to see the HTML too.

**Foppa** · 06-04-2009, 06:04 PM

Quote:

Originally Posted by LadynRed

Use the normal document flow along with floats, margins and padding to put things where you want them.

Yes, we need to see the HTML too.

I searched around for normal document flow. Does this mean I should use Position: Static; in my situation?

I'm having another issue with IE that maybe someone can notice in my code. It won't indent my <h1> tag, but it will indent my <h2> tag. Other browsers are indenting both properly.

Here's the HTML that I have so far:

HTML Code:

<html>

    <head>
        <title></title>
        
        <link rel="stylesheet" href="css/styles.css" type="text/css">
        
        
    </head>

<body>

    <div id="pagewrapper">
        
        <div class="header">
            <a href="http://com/us/en/signup.dhtml"><img src="images/isagenix-cleanse-header.jpg" border="0" /></a>
        </div>
        
        <div class="menu"> 
            <ul> 
                <li><a href="/us/en/nineday.dhtml">9 Day Program</a></li>
                <li><a href="/us/en/thirtyday.dhtml">30 Day Program</a></li>
                <li><a href="/us/en/signup.dhtml">Enroll To SAVE!</a></li>
                <li><a href="/us/en/success_main.dhtml">Testimonials</a></li>
                <li><a href="/us/en/isavideos.dhtml">Videos</a></li>
                <li><a id="right-item" href="/us/en/company_associate.dhtml">QUESTIONS?&nbsp;&nbsp;info@</a></li>
            </ul>
        </div>
        
        
        <img src="images/content-header3.jpg" border="0" id="content-header" />
        
        <a href="/thirtyday.dhtml"><img id="product-image" src="images/isagenix-products.jpg" border="0" /></a>
    
        <div id="content">
            <p><h1>Isagenix<font id="reg">&reg;</font></h1> </p>
            
            <p><h2>Restore and Retain Optimal Health!</h2></p>
        
        </div>
        
    
        
        <div id="buttons">
        
            <div id="align-left">
                <a href="/us/en/nineday.dhtml"><img src="images/9day.jpg" border="0" /> 
            </div>
        
            <div id="align-center">
                <a href="/thirtyday.dhtml"><img src="images/30day.jpg" border="0" />
            </div>
            
            <div id="align-right">
                <a href="/us/en/signup.dhtml"><img src="images/enroll.jpg" border="0" />
            </div>
        
        </div>
        
 
    </div>
    
</body>
</html>

Here's my entire CSS:

HTML Code:

body {
    color: black;
    display: block;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: 635px;
    line-height: normal;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    text-align: center;
    
}
 
 h1 {
    font-size: 22px;
}

h2 {    
    font-size: 16; 
}

.header {
    display: block;
    height: 70px;
    width: 780px;
    margin-top: 0px;
    margin-bottom: 5px;
}

#PageWrapper {
    display: block;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    text-align: left;
    width: 780px;
}

.menu{
    font-family: Century Gothic, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2px;
}

.menu ul{
    margin: 0;
    padding: 0;
    float: left;
    background: #FFFFFF;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #E1E1E1;
    border-bottom-color: #E1E1E1;
}

.menu ul li{
display: inline;
}

.menu ul li a{
    float: left;
    color: #676666;
    padding: 5px 14px;
    text-decoration: none;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #E1E1E1;
}


.menu ul li a:hover, .menu ul li .selected{
    color: #FFFFFF !important;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #5D9732;
}

#right-item{
    border-right: none;
}

#content-header {
    float: left;
    margin-top: 30px;
    margin-bottom: 30px;
    clear: both;
}

#product-image {
    margin-top: 30px;
    float: right;
}

#content {
    position: relative;
    text-align: left;
    line-height: 1em;
    text-indent: 1.5em;
}
    
#reg {
    font-size: 10px;
    vertical-align: 0.5em;
}
#buttons {
    display: block;
    width: 780px;
    position: absolute;
    top: 500px;
    text-align: center;
    margin: auto;
    clear: both;
}

#align-left {
    float: left;
    text-align: left;
    width: 260px;
}    

#align-center {
    float: left;
    text-align: center;
    width: 260px;
}

#align-right {
    float: left;
    text-align: right;
    width: 260px;
}

**Foppa** · 06-04-2009, 06:30 PM

I just figured out my original problem, so now they are centered in IE. But I'm still wondering about the other stuff.

**LadynRed** · 06-04-2009, 08:54 PM

Quote:

Does this mean I should use Position: Static; in my situation?

No, there's no reason to use positioning at all. The normal document flow is top to bottom. When you use position:absolute you REMOVE things from the document flow.

As for your heading tags.. this is improper coding, you cannot stick a block-level element like an Hx tag inside a paragraph!

Quote:

<p><h1>Isagenix<font id="reg">®</font></h1> </p>

<p><h2>Restore and Retain Optimal Health!</h2></p>

The headings stand on their own, the paragraph tags belong around your actual paragraph text.

**Foppa** · 06-04-2009, 09:15 PM

Thanks, that makes sense now.

I still can't get my <h1> and <h2> tags to indent properly in IE though. I removed the <p> tags and they're still out of place.

Do I have - text-indent: 1.5em; - in the wrong place? I put that code with the heading tags too and it also didn't work.

**LadynRed** · 06-05-2009, 03:46 PM

Text-indent works on the first line of a paragraph.
Put in some left padding on the h1 and h2 tags to push them over.

**Foppa** · 06-09-2009, 02:33 AM

Quote:

Originally Posted by LadynRed

No, there's no reason to use positioning at all. The normal document flow is top to bottom. When you use position:absolute you REMOVE things from the document flow.

I took out all my positions so that everything is now in a normal document flow. I added a footer div just below my #buttons div but in Firefox it's overlapping my buttons instead of putting it right below them. In IE it looks fine though. Happen to see anything that would cause this?

**LadynRed** · 06-09-2009, 04:32 PM

Quote:

I added a footer div just below my #buttons div but in Firefox it's overlapping my buttons instead of putting it right below them.

Make sure you have your floats cleared.

**Foppa** · 06-10-2009, 12:55 AM

Quote:

Originally Posted by LadynRed

Make sure you have your floats cleared.

Thanks. I tried that before a bunch but it made things worse, but gave another stab at it and got it working right.

How do you know when you need to clear your floats? I have some other floats that when I clear them it messes things up even worse by putting huge space gaps between my divs and then I have some floats that mess things up if they're NOT cleared.

**LadynRed** · 12:34 PM

You ALWAYS need to clear floats, by some method. There are various methods, and it really depends on your layout which one(s) are best. The gap problem happens when you use a div or <br> as a clearing element. In that case, it's better to use overflow:auto on the parent container to clear the floats. An alternative, depending on the layout, is to float the parent container, which automatically clears floats inside it.