JavaScript and client side scripting.
Moderator: General Moderators
jason
Site Admin
Posts: 1767 Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:
Post
by jason » Thu May 24, 2007 3:26 pm
The page itself can be found here:
http://mnc.devnetwork.net/template.html
The problem exists in IE7 for sure, and probably earlier versions as well.
Shows up fine in Firefox.
Site Validates for both XHTML and CSS.
Image of the problem:
Zoom in on one part:
As you can see, it looks like feet are sticking out the bottom.
What's up with that? Considering CSS bugs are all given funky names, I haven't been able to find anything about this. So what's up? Why are these feet showing up at the bottom of my DIV tags? What am I missing?
sentback
Forum Newbie
Posts: 24 Joined: Fri May 04, 2007 9:46 am
Post
by sentback » Thu May 24, 2007 3:53 pm
It's because you are probably using padding and IE has a broken box model. That's why the box is taller and it repeats the background. You can set the repeat to none and the feet as you call them won't show. The box will however still be taller then in FF or Opera.
jason
Site Admin
Posts: 1767 Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:
Post
by jason » Thu May 24, 2007 4:01 pm
Um... no. You are wrong.
feyd
Neighborhood Spidermoddy
Posts: 31559 Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA
Post
by feyd » Thu May 24, 2007 4:09 pm
I seem to remember placing <br /> after images to fix these problems in the past.
sentback
Forum Newbie
Posts: 24 Joined: Fri May 04, 2007 9:46 am
Post
by sentback » Thu May 24, 2007 4:11 pm
I could be wrong but as far as I know, the IEs problem is that padding isn't subtracted from the box but added istead. Therefor the box is biger and the background is repeated. Have you tried turning the repeat off? If you paste the code maybe someone can help you if I'm wrong..
jason
Site Admin
Posts: 1767 Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:
Post
by jason » Thu May 24, 2007 4:14 pm
sentback: Didnt' really think I would have to paste the code as well, considering I link to it at the top of the page.
Their is nothing to not repeat though as their are no background images. Also, there is no padding added to anything that should affect that.
Anyways, here's the current code.
Code: Select all
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
body {
margin: 0px;
padding: 0px;
}
#titlebanner {
width: 905px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#globalnav {
width: 905px;
margin-top: 6px;
margin-right: auto;
margin-bottom: 6px;
margin-left: auto;
}
#content {
width: 905px;
margin-top: 6px;
margin-right: auto;
margin-bottom: 6px;
margin-left: auto;
}
#content #widgets {
width: 414px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 491px;
}
#content #widgets p {
color: #FFFFFF;
font-family: Calibri, "Palatino Linotype";
padding-top: 0px;
padding-right: 3px;
padding-bottom: 0px;
padding-left: 3px;
margin-top: 4px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 0px;
}
#content #widgets #advertising p {
color: #000000;
}
#content #widgets #advertising form {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
img {
margin: 0px;
padding: 0px;
}
.promotext {
font-family: Calibri, "Palatino Linotype";
font-size: large;
font-weight: bold;
text-align: center;
display: block;
padding: 0px;
margin-top: 2px;
margin-right: 0px;
margin-bottom: 4px;
margin-left: 0px;
}
#content #maincontent {
margin: 0px;
padding: 0px;
width: 486px;
float: left;
}
#content #widgets #users {
width: 208px;
float: left;
vertical-align: top;
background-color: #1818FF;
display: inline;
}
#content #widgets #advertising {
width: 200px;
margin-left: 214px;
background-color: #8CFB18;
}
-->
</style>
</head>
<body>
<div id="titlebanner"><img src="images/titlebanner.jpg" alt="" width="690" height="55" /><img src="images/help_tb.jpg" alt="" width="64" height="55" /><img src="images/register_tb.jpg" alt="" width="72" height="55" /><img src="images/signin_tb.jpg" alt="" width="79" height="55" /></div>
<div id="globalnav"><img src="images/aboutus_mn.jpg" alt="" width="104" height="24" /><img src="images/privacypolicy_mn.jpg" alt="" width="158" height="24" /><img src="images/devzone_mn.jpg" alt="" width="108" height="24" /><img src="images/forums_mn.jpg" alt="" width="92" height="24" /><img src="images/blog_mn.jpg" alt="" width="61" height="24" /><img src="images/MyNetCredSite_14.jpg" alt="" width="382" height="24" /></div>
<div id="content">
<div id="maincontent"> <span class="promotext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed leo. Pellentesque eu orci vel erat iaculis auctor. Ut non mauris
</span> <img src="images/latestnews_mc.jpg" alt="" width="485" height="29" /> </div>
<div id="widgets">
<div id="users" class="208"><img src="images/newusers_widget.jpg" alt="" width="208" height="15" />
<p>asdf</p>
<img src="images/newusersbtm_widget.jpg" alt="" /></div>
<div id="advertising" class="200">
<form action="" method="get">
<label>Username
<input name="loginusername" type="text" id="loginusername" tabindex="1" size="20" />
</label>
<label>Password
<input name="loginpassword" type="text" id="loginpassword" tabindex="2" size="20" />
</label>
</form>
<img src="images/whynetcred_widget.jpg" alt="" width="200" height="31" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed leo. Pellentesque eu orci vel erat iaculis auctor. Ut non mauris nec pede adipiscing nonummy. Vestibulum.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed leo. Pellentesque eu orci vel erat iaculis</p>
<img src="images/MyNetCredSite_26.jpg" alt="" width="200" height="70" /> <img src="images/MyNetCredSite_27.jpg" alt="" width="200" height="60" /> </div>
</div>
</div>
</body>
</html>
I'll try the <br /> thing next.
jason
Site Admin
Posts: 1767 Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:
Post
by jason » Thu May 24, 2007 4:16 pm
Tried the <br /> tag thing. Added it after the <img> tag on line 112.
Code: Select all
<div id="users" class="208"><img src="images/newusers_widget.jpg" alt="" width="208" height="15" />
<p>asdf</p>
<img src="images/newusersbtm_widget.jpg" alt="" /><br /></div>
Didn't solve the problem.
jason
Site Admin
Posts: 1767 Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:
Post
by jason » Thu May 24, 2007 4:20 pm
Sentback, also, just remembered this. IE's problem was that it didn't add padding/margin to the box. If you set the width to 300px, and the padding and margins to 10px each, the resulting content would only have 260px of space. The correct way is in fact to add the padding and margins to the width. So that same scenario would mean the resulting box would in fact take up 340px of space. I believe you can search for Tantek box model hack to learn more about it.
Either way, I don't see anywhere I am applying a padding or marging that should affect the bottom of the DIV's, and I am (at least I believe I am) removing all padding and margins for all elements at the start of my CSS.
sentback
Forum Newbie
Posts: 24 Joined: Fri May 04, 2007 9:46 am
Post
by sentback » Thu May 24, 2007 5:21 pm
Oh yes, it's the other way around. Sorry for trying to help. I see you are the great expert and you know it all. Well... All... Except this one a believe?
I just don't see why you had to be sarcastic...
nickvd
DevNet Resident
Posts: 1027 Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:
Post
by nickvd » Thu May 24, 2007 6:35 pm
Highly recommended!
jason
Site Admin
Posts: 1767 Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:
Post
by jason » Thu May 24, 2007 9:06 pm
Gonna go ahead and try the fix. As for the jquery stuff, it just does rounded edges, which wouldn't work as I plan to use the bottom edges for things as well. I'll be removing most of the images from the actualy HTML anyways, but need to get the template finished first.
Pezmc
Forum Commoner
Posts: 53 Joined: Mon Nov 06, 2006 2:15 pm
Post
by Pezmc » Fri May 25, 2007 8:51 am
nickvd wrote:
Highly recommended!
I also recommend it but see the newer version
RobertGonzalez
Site Administrator
Posts: 14293 Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA
Post
by RobertGonzalez » Fri May 25, 2007 12:48 pm
Looks like you may have gotten it fixed? I can't see that peekaboo effect in IE6.