Solved

IE Rendering with CSS Columns

Posted on 2006-07-14
11
379 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 

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
 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

717 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