Killersites.com Homepage Welcome Guest   |   Register  |  Login
Login Name Password
  Search  
  Index  | Recent Threads  | Unanswered Threads  | Who's Online  | User List  | Help

  Killersites.com Forum
  Category: General Web Design
  Forum: CSS - Styling your pages with Cascading Style Sheets.
  Thread: Extra Space in IE is Driving Me Nuts

Quick Go »

No member browsing this thread
Thread Status: Active
Total posts in this thread: 13
Posts: 13   Pages: 2   [ 1 2 | Next Page ]
[ Jump to Last Post ]
Post new Thread
Author
Previous Thread This topic has been viewed 9642 times and has 12 replies Next Thread
Female jenyum
Stranger




Joined: Dec 9, 2007
Post Count: 6
Status: Offline
Reply to this Post  Reply with Quote 
Extra Space in IE is Driving Me Nuts
Hello all,

I'm having a problem with this page:

http://www.365tacoma.com/testfront.html

It displays the way I want it to (for now, it's obviously just a test page) in Firefox, but in IE it shows a space of about 20 pixels between the tabs and the table border underneath.

I've been trying everything I can think of to get rid of it, but it just stays there.

Here's my stylesheet (with margin:0 and padding:0 in about 20 places, some of it may look redundant, but I've been flailing.)



body {background-color: #1EB356;
background-image: url("greenback.jpg");
font-family: arial, verdana, sans-serif;
font-size: 80%;
margin: 0;
padding: 0;}


table .frontpage

{background-color: #1EB356;
}

table.frontpage
{height: 600px;
width: 600px;
margin-left:auto; margin-right:auto;
border-spacing: 0pt 0pt;
margin-top: 0;
margin-bottom: 0;
margin: 0;
border-collapse: collapse;}

table.content
{border-color: 1EB356;
border-width: 2px;
border-style: solid;
margin-top: 0;
margin-bottom: 0;
margin:0;
padding: 0;
border-collapse: collapse;}

td.righttop {background-image: url("topright2.jpg");
height: 100px; width: 100px;}
td.rightbottom {background-image: url("greenbottomright2.jpg");
height: 100px; width: 100px;}
td.lefttop {background-image: url("greentopleft2.jpg");
height: 100px; width: 100px;}
td.leftbottom {background-image:url("greenbottomleft2.jpg");}

td.side {background-image:url("sideback.jpg");}
td.sideright {background-image:url("siderightback.jpg");}
td.bottom {background-image:url("bottomback.jpg");
height:100px;
width:400px;}
td.top {background-image:url("topback.jpg");
height:100px;
width:400px;}

td.spacer {height:100px;
width:400px}



td {background-color: white}



ul.menu li{

float:left;
padding:0 5px;
list-style:none;

}

ul.menu li a{

background:url("left.gif") no-repeat left top;
height:30px;
display:block;
float:left;
padding-left:20px;
text-decoration:none;
color:#000;
margin-bottom: 0;
border-bottom-width: 0;
padding-bottom: 0;
margin:0;

}

ul.menu li a span{
cursor:pointer;

background:url("righttab1.gif") no-repeat right top;
display:block;
padding:0px 0px 0 0;
padding-right:20px;
display:block;
height:30px;
float:left;
color:white;
margin-bottom: 0;
border-bottom-width: 0;
padding-bottom: 0;
margin:0;

}

H1 {
font-size:105%;
padding:3px;}

img {vertical-align:bottom;}
[Dec 9, 2007 1:03:35 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Female Thelma
Advanced Member
Member's Avatar

Texas, USA
Joined: Dec 8, 2003
Post Count: 3021
Status: Offline
Reply to this Post  Reply with Quote 
Re: Extra Space in IE is Driving Me Nuts
You have a lot of errors in your code -

Start out by giving your document a proper doctype HTML 4.01 strict is the proper choice.

Then remove all the closing slashes - they belong with an XHTML doctype which are not and should not be using.

Change all your code to lower case - upper case works, but since code is case sensitive, strictly going lower case all the time cuts out many mistakes and much confusion.

Tables are meant for tabular data, not page layout - nowadays, CSS positioning is the way to go. Here is a tread that discusses how to do Rounded Corners with CSS - but if you don't want to change, at least make sure your table code is done right - every row needs an opening and closing tr tag -and you don't have that all the time.

Move all your styling into your external stylesheet - you still use quite a bit of inline. Start out your stylesheet with:

* {margin: 0, padding:0;} that helps set any browser-specific default margins and paddings to 0.

Then make sure your code validates - any error can cause all kinds of issues.

And lastly, nowadays, it's important to say which IE you're talking about - there is a big difference between IE6 and 7.

If none of that fixed things, let us know.
----------------------------------------
...
[Dec 9, 2007 7:40:03 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male shelfimage
Advanced Member
Member's Avatar

USA
Joined: Mar 24, 2005
Post Count: 3000
Status: Offline
Reply to this Post  Reply with Quote 
Re: Extra Space in IE is Driving Me Nuts
use a reset rule on top of all other css to remove padding and margin from elements that cause inconsistencies between the browsers...

/** =Resets **/
address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre {
margin:0;
padding:0;
}

you might even add table, td to the list
----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks
[Dec 9, 2007 10:38:49 AM] Show Printable Version of Post    View Member Profile    Send Private Message    mainewebworks    mainewebworks [Link] Report threatening or abusive post: please login first  Go to top 
Female Thelma
Advanced Member
Member's Avatar

Texas, USA
Joined: Dec 8, 2003
Post Count: 3021
Status: Offline
Reply to this Post  Reply with Quote 
Re: Extra Space in IE is Driving Me Nuts
address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre {
margin:0;
padding:0;
}

you might even add table, td to the list


Why not just go with the * - that way, EVERYTHING is covered?
----------------------------------------
...
[Dec 9, 2007 11:16:21 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Female jenyum
Stranger




Joined: Dec 9, 2007
Post Count: 6
Status: Offline
Reply to this Post  Reply with Quote 
Re: Extra Space in IE is Driving Me Nuts
I got it all down to one error, then it broke horribly with the new doc type :(

I'm going to go back to the drawing board and find another solution for tabs, they seem to be causing the problem. Do you have any recommendations or a link for a good, simple way to make tabs, or at least things that look like them?

Edited to add: I just saw the second suggestion, and it works!

covering everything under * didn't do the trick.
----------------------------------------
[Edit 1 times, last edit by jenyum at Dec 9, 2007 11:36:06 AM]
[Dec 9, 2007 11:32:06 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Female Thelma
Advanced Member
Member's Avatar

Texas, USA
Joined: Dec 8, 2003
Post Count: 3021
Status: Offline
Reply to this Post  Reply with Quote 
Re: Extra Space in IE is Driving Me Nuts
I got it all down to one error, then it broke horribly with the new doc type :(
You went about this backwards - first you use the proper doctype, then you make sure it validates.

And using strict is still the best way- if forces you to write the code properly.
----------------------------------------
...
[Dec 9, 2007 11:48:21 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Female jenyum
Stranger




Joined: Dec 9, 2007
Post Count: 6
Status: Offline
Reply to this Post  Reply with Quote 
Re: Extra Space in IE is Driving Me Nuts
It won't accept this way of doing tabs, at all.
[Dec 9, 2007 11:57:36 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male MacRankin
Advanced Member
Member's Avatar


Joined: Dec 18, 2005
Post Count: 368
Status: Offline
Reply to this Post  Reply with Quote 
Re: Extra Space in IE is Driving Me Nuts
Here's something that I've been playing around with. It's not brilliant, but at least it validates, what ever it is...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>The Green Room</title>
<meta name="generator" content="BBEdit 8.7">

<style type="text/css" media="screen">

#complete_wrapper {
width: 98%;
height: 350px;
margin: 0 auto;
padding-top: 15px;
background-color: #999;
}

#welcome_page {
width: 400px;
height: auto;
margin: 0 auto;
text-align: center;
background-color: #CFC;
border: 2px solid #000;
}

#heading {
width: 90%;
margin: 0 auto;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
font-size: 14px;
font-weight: bold;
background-color: #CCC;
}

#list_wrapper {
width: 98%;
height: 15px;
margin: -12px auto 0px auto;
text-align: center;
background-color: #F93;
}

ul {
height: 20px;
margin-right: 56px;
margin-bottom: 5px;
}

li {
margin-left: 5%;
display: inline;
background-color: #390;
}

#searchme_wrapper {
width: 98%;
height: 250px;
margin: -10px auto 0px auto;
text-align: center;
background-color: #FFC;
}

</style>

</head>
<body>

<div id="complete_wrapper">

<div id="welcome_page">

<div id="heading">Welcome to the green page!</div>


<div id="list_wrapper">

<ul>
<li>Calendar</li>
<li>Site Search</li>
<li>New Articles</li>
</ul>
</div>

<div id="searchme_wrapper">

<div id="searchform1">
<form action="http://www.365tacoma.com/testback.html" id="searchbox_010722901303478978716:2x_dqhuqke8" method="get">
<p>
<input type="hidden" name="cx" value="010722901303478978716:2x_dqhuqke8">
<input type="hidden" name="cof" value="forid:9">
<input type="text" name="q" size="25" >
<input type="submit" name="sa" value="search">

</p>
</form>
</div>

</div></div></div>


</body>
</html>

------------------

I'm not very good when it comes to forms. I had a little look via google, but can't seem to replicate those search boxes that allow you to do a google search from within your own page.
----------------------------------------
We Brits do things differently, but we still get shot at!
[Dec 9, 2007 12:24:05 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Female jenyum
Stranger




Joined: Dec 9, 2007
Post Count: 6
Status: Offline
Reply to this Post  Reply with Quote 
Re: Extra Space in IE is Driving Me Nuts
You can find the google "custom search" feature here:

http://www.google.com/coop/cse/

I found a tab setup that works better, and even validates:

http://www.webcredible.co.uk/user-friendly-re...s/css-round-corners.shtml

then I just added my own images and changed the colors. (more to do on this, but it's working at least)

Then I still had the problem of the table underneath breaking in 4.01 strict, I had it all laid out in CSS, but still with the broken. (It worked just fine in the 4.0 transitional type, with everything done in CSS.)

So, I added a border and bordercolor attribute to the HTML, which worked like a charm, but now of course, does not validate! (that, and the validator doesn't like google's code either, but it is just going to have to live with that.)

I think I was happier before I started seeking all this external validation. wink But, for now, it works!
[Dec 9, 2007 1:46:51 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Female jenyum
Stranger




Joined: Dec 9, 2007
Post Count: 6
Status: Offline
Reply to this Post  Reply with Quote 
Re: Extra Space in IE is Driving Me Nuts
use a reset rule on top of all other css to remove padding and margin from elements that cause inconsistencies between the browsers...

/** =Resets **/
address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre {
margin:0;
padding:0;
}

you might even add table, td to the list




I just wanted to make it clear, for people looking for an answer to the original question, that this was it. Thanks Shelfimage!
[Dec 9, 2007 2:28:03 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Posts: 13   Pages: 2   [ 1 2 | Next Page ]
[ Jump to Last Post ]
Show Printable Version of Thread  Post new Thread

RSS feeds Current timezone is GMT
May 20, 2013 5:26:16 PM

Powered by mvnForum 1.2.1 GA (Build: 20 November 2008)
Copyright © 2002-2008 by MyVietnam.net