Solved

IE Rendering with CSS Columns

Posted on 2006-07-14
11
370 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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

746 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