Jump to content

[SOLVED] Help with IE6

pro_se

By pro_se
in HTML Help

 Share

Recommended Posts

pro_se Member

pro_se

Posted
Posted

Hiya! I recently began another project using Photoshop to slice a web design and I realized that when you slice things it creates tables that are not XHTML valid... I was quite disappointed and did some research trying to find a way around this. I ended up making all the tables into divs...

 

I have one question though... [http://cvnetworks.net/uploads/75.jpg] Notice on the bottoms of the content panes there is that random thing... I don't know what that is... I have tried to remove it using all my prior knowledge but failed... I have also attached the code hoping one of you wonderful people have the time to take a look at it to maybe identify the problem...

 

html--

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<!--[if IE 6]>
<style type="text/css">
.nav {
padding-top: 20px;
} </style>
<![endif]-->
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/bg.gif);
background-repeat: repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.wrap {
position: relative;
width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.header {
position: relative;
height: 153px;
}
.nav {
position: relative;
margin-top: -12px;
margin-left: -20px;
height: 32px;
font-size: 20px;
margin-left: auto;
    margin-right: auto;
}
.nav li {
list-style: none;
float: left;
margin: 0px 40px;
}
.nav li a {
color: #cc3333;
}
.nav li a:hover {
color: #666666;
}
.mainsep {
height: 38px;
position: relative;
background-image: url(images/topbox.gif);
}
.left {
width: 282px;
position: relative;
background-image: url(images/left-main.gif);
background-repeat: repeat-y;
float: left;
}
.left-btm {
position: relative;
width: 282px;
float: left;
}
.right {
width: 518px;
position: relative;
background-image: url(images/right-main.gif);
background-repeat: repeat-y;
float: left;
}
.right-btm {
position: relative;
width: 518px;
float: left;
background-color: #FFFFFF;
}
.boxed-content {
padding-left: 25px;
padding-right: 19px;
}
.footer {
position: relative;
font-size: 10px;
}
-->
</style></head>

<body><div class="wrap">
  <div class="header"><a href="#"><img src="images/header.gif" alt="NoTexting" width="799" height="153" border="0" /></a></div>
  <div class="nav"><ul>
  	<li><a href="#">Home</a></li>
    <li><a href="#">Login</a></li> 
    <li><a href="#">Register</a></li> 
    <li><a href="#">Help</a></li> 
    <li><a href="#">About</a></li>
  </ul></div>
  <div class="mainsep"></div>
  <div class="left"><p class="boxed-content">login area...</p>
<div class="left-btm"><img src="images/left-bottom.gif" width="282" height="26" border="0" /></div>
  </div>
  <div class="right"><p class="boxed-content"><strong>Lorem ipsum dolor sit amet,</strong> consectetuer adipiscing elit. Nunc pulvinar nunc ac quam. Donec at diam. Donec aliquam posuere nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris libero eros, tempor sit amet, hendrerit a, dictum ut, pede. Maecenas consequat bibendum mauris. Aliquam id quam bibendum urna scelerisque interdum. In commodo lorem eu eros. Etiam ut sapien eget elit ullamcorper lobortis. Proin ipsum erat, elementum sed, tempus vel, sagittis sit amet, purus.</p>
  <div class="right-btm"><img src="images/right-bottom.gif" width="517" height="50" border="0" /></div>  
  </div>
<div class="footer" align="center">Footer Text goes here </div>
</div>
</body>
</html>

Link to comment
Share on other sites
New Coder Member

New Coder

Posted
Posted

I might be wrong but remove these lines:

 

<div class="left-btm"><img src="images/left-bottom.gif" width="282" height="26" border="0" /></div>

 

<div class="right-btm"><img src="images/right-bottom.gif" width="517" height="50" border="0" /></div>

 

You are calling the image in the stylesheet aswell. In your classes left and right

 

Hope this helps

 

Link to comment
Share on other sites
pro_se Member

pro_se

Posted
  • Author
Posted

Ok, I messed with it a while more.. All I did was put the image at the bottom of the div..

 

<div class="right"><p class="boxed-content"><strong>Lorem ipsum dolor sit amet,</strong> consectetuer adipiscing elit. Nunc pulvinar nunc ac quam. Donec at diam. Donec aliquam posuere nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris libero eros, tempor sit amet, hendrerit a, dictum ut, pede. Maecenas consequat bibendum mauris. Aliquam id quam bibendum urna scelerisque interdum. In commodo lorem eu eros. Etiam ut sapien eget elit ullamcorper lobortis. Proin ipsum erat, elementum sed, tempus vel, sagittis sit amet, purus.</p>
<img src="images/right-bottom.gif" width="517" height="50" border="0" /></div>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.