IE not displaying DIVS right, but it could be me

HAkaslak · 06-05-2006, 10:12 AM

Link: www.awp-tech.com

For some reason, IE will not display my webpage correctly... in Firefox and Opera, the page is fine, but in IE 6, the <div id="content_text"> will show up underneath the <div id="nav">. I must be doing something wrong, I know it... also, the page is ASP, and the source code for it is below:

Code:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AwP-Tech.com - The Customized Computer Store!</title>
<link href="Files/CSS/global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="holder">
  <!-- This is the header, where the logo is -->
  <div id="header">
    <!--#include virtual="/Files/Includes/header.asp" -->
  </div>
  <!-- This is the main navigator -->
  <div id="nav">
    <!--#include virtual="/Files/Includes/nav.asp" -->
  </div>
  <div id="content">
    <div id="breadcrumb"><a href="/index.asp">www.AwP-Tech.com</a> / <a href="/index.asp">Home</a> / </div>
    <!--#include virtual="/Files/Includes/gallery.asp" -->
    <div id="content_text">
      <p>All of our systems are backed by a standard 1 year warranty</p>
      <p>Our computers will suit your needs 100%</p>
      <p>Free online Technical Support</p>
      <p>Our prices are flexible - we can build a system for any budget.</p>
    </div>
    <!--#include virtual="/Files/Includes/xlinks.asp" -->
  </div>
  <!-- This is the start of the footer -->
  <div id="footer">
    <!--#include virtual="/Files/Includes/footer.asp" -->
    <div class="brclear"></div>
  </div>
</div>
</body>
</html>

The CSS Code is here:

http://www.awp-tech.com/files/css/global.css

Can anyone help me out with this? I just started, so please don't flame me for a sucky website or bad coding...

Izzmo · 06-05-2006, 05:27 PM

Well, here's the thing with my browsers. They are showing both the same for FF and IE for me, except FF is aligned to the left, and IE centers it, who knows why

.

But instead of using ALL div's, I would use tables, it would be perfect for your site.

Simple this:

Code:

<table>
<tr>
<td>
menu here. You can also make another table inside this one if you want the picture below to be in another table.
</td>
<td>
Content here.
</td>
</tr>
</table>

Of course, you can change the widths and heights with both cells, but this is the easiest way of doing it in my head.

Kalina · 06-05-2006, 05:44 PM

Do not change it to tables.

This is the problem. Your container has a fixed width of 900px.

Your nav, you've made it 150px, you've made your content area 750px, added together: 950px.

Now add in the padding you've specified for both the content and nav, that's ADDED to the width, therefore the layout would need at least 950px to fit 2 columns side-by-side.

You have to count padding/margins into the width.

I am going to fix it so it works. CSS/Divs is always better to use than tables. Tables are for tabular data, not design.

Will BRB with a fix for you.

Kalina · 06-05-2006, 06:02 PM

Replace your CSS with this.

Code:

/* For the special IE */
body {
font-size:small;
/* IE5 Win */
voice-family:"\"}\"";
voice-family:inherit;
font-size:medium;
font-family:Verdana, sans-serif;
}

html>body {
/* be nice to Opera */
font-size:medium;
font-family:Verdana, sans-serif;
}

p {
font-size:80%;
}

body {
font:100% Verdana, sans-serif;
color:#333;
background:#fff;
margin:0;
padding:0;
font-size:medium;
}

#holder {
width:900px;
background:#fff;
text-align:left;
margin:0;
overflow:hidden;
}

#header {
width:900px;
background:#FFF;
border-bottom:thin solid #ccc;
text-align:center;
}

#nav {
float:left;
width:150px;
padding:15px 10px;
margin:0;
overflow:hidden;
}

#content {
float:left;
width:700px;
padding:10px;
border-left:thin solid #ccc;
}

.brclear {
clear:both;
height:0;
margin:0;
font-size:1px;
line-height:0;
}

#footer {
width:100%;
border-top:thin solid #ccc;
color:#999;
font-size:smaller;
clear:both;
margin:0;
padding:15px;
font-size:85%;
color:#333;
}

#content p {
line-height:130%;
}

a:link {
color:#069;
}

a:visited {
color:#069;
}

a:hover,a:active,a:focus {
color:#C00;
}

#xsnazzy h1,#xsnazzy p {
margin:0 10px;
}

#xsnazzy h1 {
font-size:120%;
color:#666;
border:0;
font-family:verdana, sans-serif;
}

#xsnazzy p {
font-size:small;
padding-bottom:0.5em;
}

#xsnazzy {
background:transparent;
margin:1em;
}

.xtop,.xbottom {
display:block;
background:transparent;
font-size:1px;
}

.xb1,.xb2,.xb3,.xb4 {
display:block;
overflow:hidden;
}

.xb1,.xb2,.xb3 {
height:1px;
}

.xb2,.xb3,.xb4 {
background:#fff;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}

.xb1 {
margin:0 5px;
background:#ccc;
}

.xb2 {
margin:0 3px;
border-width:0 2px;
}

.xb3 {
margin:0 2px;
}

.xb4 {
height:2px;
margin:0 1px;
}

.xboxcontent {
display:block;
background:#fff;
border:0 solid #ccc;
border-width:0 1px;
padding-left:10px;
padding-right:10px;
}

#find {
float:right;
background-color:#FFF;
list-style-type:none;
}

#reg {
float:left;
background-color:#FFF;
list-style-type:none;
}

#menu a,#menu a:visited {
text-decoration:none;
background-color:#fff;
color:#333;
display:block;
width:7em;
height:1.5em;
padding:0.5em;
text-indent:1em;
border-bottom:1px solid #fff;
overflow:hidden;
}

#menu a:hover {
color:#fff;
text-indent:1em;
border-bottom:1px solid #fff;
overflow:hidden;
background-color:#069;
}

#nav_gutter {
width:100%;
}

#nav_gutter h1 {
color:#666;
font-size:medium;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#breadcrumb {
font-size:small;
border-bottom:thin solid #CCC;
font-weight:700;
padding-bottom:10px;
text-decoration:none;
color:#666;
}

#Page_Title {
font-size:200%;
color:#069;
padding:10px;
}

#content_gutter {
font-size:medium;
color:#333;
padding:2px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

/* needed for IE to make :active state work first time */
a,a:visited {
color:#069;
}

/* common styling for all galleries */
a.gallery,a.gallery:visited {
display:block;
display:inline-block;
color:#000;
text-decoration:none;
border:1px solid #ccc;
width:75px;
height:47px;
float:left;
margin:4px;
z-index:50;
}

a.slidea {
background:url(../Images/Gallery/thumb_set01.jpg);
}

a.slideb {
background:url(../Images/Gallery/thumb_set02.jpg);
}

a.slidec {
background:url(../Images/Gallery/thumb_set03.jpg);
}

a.slided {
background:url(../Images/Gallery/thumb_set04.jpg);
}

a.slidee {
background:url(../Images/Gallery/thumb_set01.jpg);
}

a.slidef {
background:url(../Images/Gallery/thumb_set02.jpg);
}

a.slideg {
background:url(../Images/Gallery/thumb_set03.jpg);
}

a.slideh {
background:url(../Images/Gallery/thumb_set04.jpg);
}

a.slidei {
background:url(../Images/Gallery/thumb_set01.jpg);
}

a.slidej {
background:url(../Images/Gallery/thumb_set02.jpg);
}

a.gallery em,a.gallery span {
display:none;
}

a.gallery:hover {
border:1px solid #fc3;
}

/* styling for LEFT gallery */
#container_left {
position:relative;
width:600px;
height:305px;
background:#fff;
border:1px solid #ccc;
margin:1em auto;
}

#container_left img {
border:0;
}

#container_left #thumbs {
width:170px;
position:absolute;
left:0;
top:0;
}

#container_left a.gallery:hover span {
display:block;
position:absolute;
width:402px;
height:50px;
top:265px;
left:175px;
padding:5px;
font-style:italic;
color:#000;
z-index:100;
font-size:x-small;
overflow:hidden;
}

#container_left a.gallery:hover span:first-line {
font-style:normal;
font-weight:700;
font-size:1.1em;
color:#000;
overflow:hidden;
}

#container_left a.gallery:active,#container_left a.gallery:focus {
border:1px solid #000;
}

/* the large image's border */
#container_left a.gallery:active em,#container_left a.gallery:focus em {
display:block;
position:absolute;
width:402px;
height:250px;
top:5px;
left:180px;
padding:5px;
color:#000;
border:1px solid #ccc;
z-index:50;
}

#container_left h1 {
clear:both;
margin:0;
padding-top:50px;
padding-left:250px;
width:300px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif,;
font-size:2em;
font-weight:400;
color:#069;
overflow:hidden;
}

#container_left h1 em {
font-size:0.6em;
color:#f90;
font-weight:700;
}

#map {
float:left;
}

#map_comment {
float:right;
width:150px;
height:300px;
}

#hr {
clear: both;
color:#CCC;
size:1px;
}

You can also remove the table from around the gallery section in the middle, it's serving no purposes and just bulking up your code unnecessarily.

Oh AND your hr styling uses an ID, an ID can only be specified once per page, please change that to a class for the HR.

JamieJelly · 06-06-2006, 12:16 AM

Colleen, isn't that hack for Win IE5 only needed if there is no doctype and IE is using quirks mode?

Kalina · 06-06-2006, 01:41 AM

I didn't add any hacks, but I believe you're right. I just adjusted what was there breaking the layout.

JamieJelly · 06-06-2006, 01:55 AM

ah ok

Kalina · 06-06-2006, 01:58 AM

I am not too familiar on the reasoning for hacks, but have had to use them in the past when things didn't work, if you want to give me a lesson on them, I'm willing to learn... hehe...

I do recall that it's because IE closes the } early so that's what that hack is for, whatever that means.

JamieJelly · 06-06-2006, 03:12 AM

ok I will prepare a tutorial/article/blogamathing on when to hack and when not to.

This is not saying I know it ALL already, but I have a pretty good idea, I have the books, blogs and articles bookmarked too so I can collate.

Also, conditional comment tags will be worth a mention, e.g

Code:

<!--[if IE]>
<style>
div.logo {
	margin-left: 10px;
}
</style>
<![endif]-->

where am I going to post this collected wisdom?!

HAkaslak · 06-06-2006, 09:04 AM

Wow you guys. That is a lot of help!

I'll tweak the CSS, and see what happens. I'm pretty much just like a script-kiddie. I have a vague idea of what to do, but at this point, I'm just copy and pasting.

The hacks are there to force IE to display font sizes at the same size as Fox and Opera

JamieJelly · 06-06-2006, 09:10 AM

whats wrong with

Code:

body {
	font: 62.5% 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif; /* resets 1em to 10px */
}

?

HAkaslak · 06-06-2006, 10:18 AM

???

No clue...

shorthand??

Or is it because the base font size is not defined? I'm thinking you can't get 62.5% if you don't know what base size it is referring to.

JamieJelly · 06-06-2006, 10:20 AM

hehe I'm not saying there is anything wrong with it, it works to reset 1em to 10px.

HAkaslak · 06-06-2006, 10:23 AM

How did that line reset 10px to 1em??

JamieJelly · 06-06-2006, 10:36 AM

http://www.maratz.com/blog/archives/...ase-font-size/