Jump to content

  • Log in with Facebook Log in with Twitter Log In with Google      Sign In   
  • Create Account

Subscribe to HRA Now!

 



SEO Class in Chicago, IL

Learn How To Optimize Your Website on July 26, 2013


Looking for personalized in-depth SEO training among your peers?



High Rankings is offering a 1-day customized SEO training class in Chicago. Class size is limited so please sign-up now if you want in!



 


Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE! 

 



 

 www.CustomReportSharing.com 

From the folks who brought you High Rankings!



Photo
- - - - -

Css Alignment Problem With Ie


  • Please log in to reply
3 replies to this topic

#1 Just C

Just C

    Queen of Procrastination

  • Active Members
  • PipPipPip
  • 74 posts

Posted 31 May 2008 - 09:50 AM

Hi everyone,
I'm being driven insane by IE (sound familiar?) and am running out of ideas.

DTD XHTML 1.0 Transitional, 2 column CSS
Left column contains an image on each page (sizes vary).
Right column has a headline, a couple of lines text, and then a scroll box for more text.

Everything works beautifully in Firefox (of course). IE, however, moves the scrollbox down the page, for it to be aligned to the bottom of the image used in the left column.
This means the right column will look like: headline, text, blank space as high as picture in left column, scrollbox.

[codebox]
#col-left {
float: left;
width: auto;
height: auto;
margin-top: 72px;
margin-right: 5px;
margin-left: 3px;
padding: 3px;
background-color: #444446;
border: 2px outset #2655CC;
font-family: "Times New Roman", Ariel, Helvetica, sans-serif;
font-size: 12px;
color: #E0E0E0;
}



#col-right {
padding: 3px;
margin-top: 77px;
margin-left: 320px;
margin-right: 5px;
background-image: none;
background-repeat:no-repeat;
background-color: #444446;
height: auto;
border: 2px outset #2655CC;
font-family: "Times New Roman", Ariel, Helvetica, sans-serif;
font-size: 12px;
color: #E0E0E0;
text-align: left;
}

#scroll {
padding: 3px;
margin-right: 5px;
height: 350px;
width: 400px;
overflow: auto;
border: 2px outset #2655CC;
}
[/codebox]

The HTML for that section:
[codebox]
<div id="col-left">
<img src="image" width="xy" height="xy" />
</div>


<div id="col-right">
<h3>Headline</h3>
<p>
Text text text
</p>
<div id="scroll">
text text text
</div></div>

[/codebox]

I'm running out of ideas. As usual, it might well be something blatantly obvious, frustrate.gif but I was up 'til dawn trying to fix this, and right now I'm just 1ko.gif

Thanks!

Edited by Just C, 31 May 2008 - 12:32 PM.


#2 Just C

Just C

    Queen of Procrastination

  • Active Members
  • PipPipPip
  • 74 posts

Posted 31 May 2008 - 05:46 PM

I've solved it myself. rolleyes.gif
Margin-left (right column) was 5px too wide. fool.gif

IE sucks.
bash.gif


Moderator, feel free to close this topic smile.gif

#3 Randy

Randy

    Convert Me!

  • Moderator
  • 17,540 posts

Posted 31 May 2008 - 05:52 PM

The old box model bug rears its ugly head again! whistling.gif

FWIW, if you want to leave it the other way for non-IE users you can Conditional Comments to serve up a slighly different CSS rule to IE users only.

#4 Just C

Just C

    Queen of Procrastination

  • Active Members
  • PipPipPip
  • 74 posts

Posted 31 May 2008 - 06:01 PM

QUOTE(Randy @ May 31 2008, 11:52 PM) View Post
The old box model bug rears its ugly head again! whistling.gif

I know, dumb eh?
QUOTE(Randy @ May 31 2008, 11:52 PM) View Post
FWIW, if you want to leave it the other way for non-IE users you can Conditional Comments to serve up a slighly different CSS rule to IE users only.

Thanks Randy...in this case, the 5px adjustment doesn't really make any visible difference, and frankly, I'm just fed up with that project now! LOL

I need some caffeine.....








0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users