Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

IE Rendering with CSS Columns

Posted on 2006-07-14
11
Medium Priority
?
382 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 260 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 240 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
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.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

636 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