Solved

IE Rendering with CSS Columns

Posted on 2006-07-14
11
374 Views
Last Modified: 2013-11-19
I have a CSS layout web page that I'm having problems with in Internet Explorer. The page is pretty much laid out in 3 columns, but IE keeps throwing the information from the 3rd column into the 2nd column. Any reason why this is happening? Here's the pertaning CSS and html:

#secondaryContent {
      width: 165px;
      float: right;
}

<!--3rd CSS column-->
<DIV ID="secondaryContent">
      <IMG ALT="" SRC="/design/DESIGN06_05.jpg" WIDTH="165"><BR CLEAR="ALL">
      <SPAN CLASS="pageheader">Web Design</SPAN><BR>
            Need a Web Site, business cards, or souvenir booklet? Visit <A HREF="javascript:popUp('http://www.sedulouswebdesign.com')">Sedulous
            Web Design</A> for Dedicated, Dependable, and Affordable design.

      <P><SPAN CLASS="pageheader">My Man</SPAN><BR>
      <IMG SRC="/images/102805.jpg" STYLE="border: solid 2px white;">
</DIV> <!-- SecondaryContent -->

Hopefully that's enough information to find out what's going on. To see the full layout, go to: www.crimsondiva.com/index2.php

Thanks!

0
Comment
Question by:crimsondiva
  • 4
  • 3
  • 3
11 Comments
 
LVL 2

Expert Comment

by:mach-
ID: 17112408
Can you post the full HTML and CSS here? I can't load the links.
0
 
LVL 17

Accepted Solution

by:
BogoJoker earned 65 total points
ID: 17114572
Instead of float right have you tryed:

#secondaryContent {
     position: absolute;
     right: 0;
     width: 165px;
}

This looks like it will work in firefox but not IE.
0
 
LVL 2

Assisted Solution

by:mach-
mach- earned 60 total points
ID: 17115928
Here's an example of a three column layout:
http://bluerobot.com/web/layouts/layout3.html

Is this similar to what you're trying to do?
0
 

Author Comment

by:crimsondiva
ID: 17117934
I think there is some confusion about what's going on. I've updated the URL. The page is now LIVE at: www.crimsondiva.com. The problem I'm having is that the image of the woman and the man is supposed to appear directly beneath the section heading "My Man". This appears fine in Firefox, but IE forces the image into the 2nd column, beneath the section entitled "Singing and Such". This is an obvious error.
0
 
LVL 17

Expert Comment

by:BogoJoker
ID: 17118569
Both mach and I provided the same suggestion.

Change the CSS for #secondaryContent to absolute positioning, provide a width, and put it on the right side.
Mach gave you an example of a 3 column layout and teh CSS is generally the same as the CSS that I posted.

Experiment with:
right: 20px; if you want it to have a little margin between from the right side.

If my CSS does not fix it then mach's solution will certainly be a complete fix.  The layout is designed so that there is one content area with a margin on the left and a margin on the right.  Then two sections that fill in the left and the right.

Joe P
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 2

Expert Comment

by:mach-
ID: 17119351
The reason it is moving to the other column is that the wrapper and content div are too small. Increase the size of #wrapper and #content to 860px and it should work fine.
0
 

Author Comment

by:crimsondiva
ID: 17122913
Thanks, to both of you, but now the text scrolls off the background image (in both IE and Firefox). I'm not sure if I should open another ticket for this or not since I would have never known about it if the image issue wasn't a problem. Well, here's all of my code. Maybe it will help:

***************  CSS  ***************************

BODY, P {
      font-family: "Trebuchet MS";
      color: #FFFFFF;
      font-size: 14px;
}

.pageheader {
      font-weight: normal;
      font-size: 24px;
      color: #f2d059;
      letter-spacing: 0em;
      font-family: "Impact";
      text-transform:uppercase;
}

a {
    COLOR: #4D83D5;
    TEXT-DECORATION: none;
}

a:hover {
      color: #f2d059;
}

body {
      background-color: #000;
      margin-top: 0px;
}

.rollover a {
      display: block;
}

#branding {
      width: 850px;
      height: 58px;
      background: url(/design/DESIGN06_01.jpg) no-repeat;
}
      
#wrapper {
      width: 850px;
      position: relative;
      margin-left: -425px;
      left: 50%;
}

#content {
      width: 850px;
      float:left;
      background: url(/design/contentsliver.gif) repeat-y;
}

#mainContent {
      width: 400px;
      float: left;
}
/* This will indent only the Paragraphs within the MainContent section...cool
#mainContent {
      padding-left: 20px;
      padding-right: 20px;
}*/

#secondaryContent {
      width: 165px;
      float: right;
      position: absolute;
    right: 0;}

#leftImages {
      width:155px;
      float: left;
}
 
#mainNav {
      font-family: Tahoma;
      width:125px;
      float: left;
}

#mainNav p{
      margin-top: 0px;
      margin-bottom: 7px;
}

.clear {
      clear: both;
}

******************* HTML****************

<BODY>
<DIV ID="wrapper">
      <DIV ID="branding"></DIV>
      <DIV ID="content">
<DIV ID="leftImages">
      <IMG ALT="" SRC="/design/DESIGN06_02.jpg">
</DIV> <!--LeftImages -->

<DIV ID="mainNav">
      &nbsp;
      <P> <!--A HREF="about.php"About The Diva</A>
      <P><!--A HREF="design.php"Web Design</A>
      <P><!--A HREF="resume.php"Resume</A>
      <P>Photos-->
      <!--mix a floated div with an absolutely positioned div and in my experience that is asking for trouble-->
   <DIV STYLE="margin-top:105px; "> <!-- set to 28px when links are added back-->
               <IMG HEIGHT=390 ALT=Pics2 SRC="/design/DESIGN06_10.jpg" WIDTH=125>
      </DIV>            
</DIV> <!-- MainNav -->

<DIV ID="mainContent">
      <SPAN CLASS="pageheader">Welcome</SPAN><BR>
      I've been playing around with CSS layouts, so it took me a minute to set up this new site. I know it's not
      full of bells and whistles, but I think it's a great start!
      There      are a few areas that still need a lot of work so they'll be added slowly, but now that I'm getting the layout down
      I don't imagine it will be long before they're up and running again.
      <P><SPAN CLASS="pageheader">A Bun in the Oven</SPAN><BR>
      <IMG SRC="/images/isaiahsonogram.gif" ALIGN="LEFT" ALT="sonograpm photo">I'm pregnant! Yep, my first child, <SPAN STYLE="color:#3C3; font-weight:bold;">Isaiah Christopher Greer</SPAN>, is due on <STRONG>August 31st</STRONG>. My husband and I are overly excited! He can't wait to
      teach him to play golf and the ideals of a Kappa man. hahaha
      That sonogram was taken at my 9 week, 5 days appointment. I love being pregnant! My son kicks all the time. Since we're near the due date, he's pretty much head down, so his feet
      have a ball up in my rib cage. LOL
      <P><SPAN CLASS="pageheader">Singing and Such</SPAN><BR>
      Well, with Isaiah, I haven't had much time to sing lately aside from at church. I'm on the Praise & Worship Team at
      <A HREF="javascript:popUp('http://www.ffccsacto.org')">Faith Fellowship Community Church</A> and we had a WONDERFUL program entitled
      "Seeking God's Face" on Friday, June 30th. I actually did a solo. <!--Here's a sample of the song. Credit to Juanita Bynum. It's actually a medley with "Heart's Desire"
      and "You Are Great"--> I'll have a sample of it up soon!
      
            
</DIV> <!-- MainConent -->

<DIV ID="secondaryContent">
      <IMG ALT="" SRC="/design/DESIGN06_05.jpg" WIDTH="165"><BR CLEAR="ALL">
      <SPAN CLASS="pageheader">Web Design</SPAN><BR>
            Need a Web Site, business cards, or souvenir booklet? Visit <A HREF="javascript:popUp('http://www.sedulouswebdesign.com')">Sedulous
            Web Design</A> for Dedicated, Dependable, and Affordable design.

      <P><SPAN CLASS="pageheader">My Man</SPAN><BR>
      <IMG SRC="/images/102805.jpg" STYLE="border: solid 2px white;"><BR CLEAR="ALL">
      This is my husband. We've been married for almost 2 years now, but I've known him for 13.
</DIV> <!-- SecondaryContent -->
      </DIV> <!-- Content -->
<P>
 <A HREF="http://jigsaw.w3.org/css-validator/">
  <IMG STYLE="border:0;width:88px;height:31px"
       SRC="http://jigsaw.w3.org/css-validator/images/vcss"
       ALT="Valid CSS!">
 </A>
</P>      
</DIV> <!-- Wrapper -->
</BODY>
0
 

Author Comment

by:crimsondiva
ID: 17158608
Well, no one has replied in a while, so I'm going to award points and try to figure this 2nd question out on my own. :(
0
 
LVL 17

Expert Comment

by:BogoJoker
ID: 17158638
In the future you should probably split the points.
I did look at the second issue but honestly I could not find out how to fix it.  =(

Joe P
0
 

Author Comment

by:crimsondiva
ID: 17168871
I was trying to split points...it didn't work the first time. So I sent a message to Support. They reopened the question so that I could split points.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how to create a tile layout 1 38
CSS Question 5 41
Add animation to your css 12 32
css help with menu spacing 10 31
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn how to count occurrences of each item in an array.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now