Webmaster-Talk.com > Coding Talk > CSS Forum > Where is this gap coming from????!!

Reply
Where is this gap coming from????!!
Old 07-30-2007, 08:38 PM Where is this gap coming from????!!
DrSeuss's Avatar
Skilled Talker

Posts: 60
Name: Matt
Talkupation: DrSeuss is on a distinguished road
So I have 2 almost identical pages (as far as layout and styles go), but when i preview the pages, I get this weird gap in one of the pages???

Page 1 (no gap): http://www.systemsnspace.com/new2007/
Page 2(see gap under menu): http://www.systemsnspace.com/new2007.../sixphase.html

They both use the same style sheet, and divs... so what gives?

here is the style sheet:

Code:
p {
    color: #000000;
    text-align: justify;
    margin-right: 380px;
    padding-left: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}
p.thumbs{
    color: #000000;
    text-align: justify;
    padding-left: 25px;
    padding-right: 65px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}    
.style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
}
body {
    background: #666666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #333333;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
li{
    list-style-image: url(images/bullet.gif);
    margin: 0px 15px 5px 5px;
    padding: 0 20px;
}
ul{
    margin: 15px 15px 10px 25px;
}
li.sixphaseapproach{
    list-style: none;
    background: url(images/bullet.gif) no-repeat left top; 
    margin: 0px 15px 20px 25px;
}
li.bullets{
    list-style: none;
    background: url(images/bullet.gif) no-repeat left top; 
    margin: 0px 15px 5px 25px;
}
.style5 {
    color: #000000;
    text-align: justify;
    padding-left: 20px;
    padding-top: 15px;
    padding-right: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}

.menu A:link {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:visited {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:active {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:hover {font-family: Arial, Helvetica, sans-serif; color: #999999; text-decoration: none}

.bullets A:link {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left;  margin-bottom: 5px; font-size: 11px;}
.bullets A:visited {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
.bullets A:active {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
.bullets A:hover {font-family: Arial, Helvetica, sans-serif; color: #666666; text-decoration: none; text-align: left; margin-bottom: 5px; font-size: 11px;}

#bullets A:link {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
#bullets A:visited {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
#bullets A:active {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
#bullets A:hover {font-family: Arial, Helvetica, sans-serif; color: #666666; text-decoration: none; text-align: left; margin-bottom: 5px; font-size: 11px;}

.pagelinks a:link {
    font-family: Arial, Helvetica, sans-serif; 
    color: #000000; 
    text-decoration: underline; 
    float: right; 
    padding-right: 15px;
    display: block;
}
.pagelinks a:visited {
    font-family: Arial, Helvetica, sans-serif; 
    color: #000000; 
    text-decoration: underline; 
    float: right; 
    padding-right: 15px;
    display: block;
}
.pagelinks a:active {
    font-family: Arial, Helvetica, sans-serif; 
    color: #000000; 
    text-decoration: underline; 
    float: right; 
    padding-right: 15px;
    display: block;
}
.pagelinks a:hover {
    font-family: Arial, Helvetica, sans-serif; 
    color: #666666 ; 
    text-decoration: none; 
    float: right; 
    padding-right: 15px;
    display: block;
}
.style6 {
    color: #CC0000;
    font-weight: bold;
}
.sixphase {
    color: #CC0000;
    font-size: 13px;
    font-weight: bold;
}
#sixphasetext {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    margin-left: 50px;
}
.style7 {color: #FFFFFF}

img.title {
    padding: 10px 0px 0px 10px;
}
img.title2 {
    padding: 5px 0px 0px 10px;
}
#container {
    background: #FFFFFF;
    position: relative;
    width: 924px;
    height: 568px;
    border: hidden;
    border-width: 0;
    margin: auto auto auto auto;
}
#toplinks {
    background: url(images/topbar.jpg);
    padding: 9px 20px 0 0;
    height: 24px;
    width: 904px;
}
#rightimage {
    float: right;
    height: 374px;
    width:  355px;
}
#image1 {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 0px;
    top: 181px;
}
#image2 {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 0px;
    top: 181px;
}
#image3 {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 0px;
    top: 181px;
}
#image4 {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 0px;
    top: 181px;
}
#image5 {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 0px;
    top: 181px;
}
#surveycontent {
    background: #FFFFFF;
    position: float;
    padding: 10px 10px 10px 10px;
    height: 374px;
    width: 903px;
    left: 0px;
    top: 179px;
}
#content {
    background: #FFFFFF;
    height: 374px;
    width: 924px;
}
#footer {
    clear: both;
    text-align: center;
    background: url(images/bottombar.gif);
    padding-top: 8px;
    height: 22px;
    width: 924px;
}
#thumbs {
    position: absolute;
    margin: 11px 15px 10px 15px;
    width: 57px;
    height: 353px;
    top: 181px;
    right: 355px;
}
This is frustrating... but I am getting it.. and the site loads SOO much quicker without tables!

Thanks for your help!
DrSeuss is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
Old 07-30-2007, 09:31 PM Re: Where is this gap coming from????!!
LadynRed's Avatar
Super Moderator

Posts: 6,718
Location: Tennessee
Talkupation: LadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond repute
The code isn't exactly the same. In the 2nd page with the gap, there is a <br /> after the last image map section. There is no <br /> after the last map section on the first page.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 07-31-2007, 02:56 PM Re: Where is this gap coming from????!!
DrSeuss's Avatar
Skilled Talker

Posts: 60
Name: Matt
Talkupation: DrSeuss is on a distinguished road
ahhhh... I thought I got rid of all those...

Now here's another page with gaps... no <br /> s here... and this page uses the same style sheet posted above. Any ideas why the right image has that small gap at the top and bottom???

http://new2007.systemsnspace.com/about/whois.html

Thanks!
DrSeuss is offline
Reply With Quote
View Public Profile
 
Old 07-31-2007, 05:31 PM Re: Where is this gap coming from????!!
LadynRed's Avatar
Super Moderator

Posts: 6,718
Location: Tennessee
Talkupation: LadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond repute
Looks to me like the absolute positioning on #image1, 2, 3, & 4. I set it to 2 px less and it snugs up to the black.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 07-31-2007, 09:20 PM Re: Where is this gap coming from????!!
DrSeuss's Avatar
Skilled Talker

Posts: 60
Name: Matt
Talkupation: DrSeuss is on a distinguished road
Thanks for your help LadynRed

Ok, so I have decided to move the #thumbs & #image1-5 divs into #content, and set it as relative. Then I set the #thumbs & #images1-5 divs to top:0px. This eliminated the problem with moving it up or down enough.

However, I still have the gap! It is now only in IE (of course) and it is on all my pages above the image on the right, whether it is floated right, or absolute. If I could just solve this last issue, I can start working on the other pages when I have solid working layouts.

I'm sure it is something small I am overlooking...

So here is a page to view the html:

http://new2007.systemsnspace.com

and the latest css:

Code:
p {
    color: #000000;
    text-align: justify;
    margin-right: 380px;
    padding-left: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}
p.thumbs{
    color: #000000;
    text-align: justify;
    padding-left: 25px;
    padding-right: 65px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}    
.style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
}
body {
    background: #666666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #333333;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
li{
    list-style-image: url(images/bullet.gif);
    margin: 0px 15px 5px 5px;
    padding: 0 20px;
}
ul{
    margin: 15px 15px 10px 25px;
}
li.sixphaseapproach{
    list-style: none;
    background: url(images/bullet.gif) no-repeat left top; 
    margin: 0px 15px 20px 25px;
}
li.bullets{
    list-style: none;
    background: url(images/bullet.gif) no-repeat left top; 
    margin: 0px 15px 5px 25px;
}
.style5 {
    color: #000000;
    text-align: justify;
    padding-left: 20px;
    padding-top: 15px;
    padding-right: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}

.menu A:link {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:visited {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:active {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:hover {font-family: Arial, Helvetica, sans-serif; color: #999999; text-decoration: none}

.bullets A:link {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left;  margin-bottom: 5px; font-size: 11px;}
.bullets A:visited {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
.bullets A:active {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
.bullets A:hover {font-family: Arial, Helvetica, sans-serif; color: #666666; text-decoration: none; text-align: left; margin-bottom: 5px; font-size: 11px;}

#bullets A:link {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
#bullets A:visited {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
#bullets A:active {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
#bullets A:hover {font-family: Arial, Helvetica, sans-serif; color: #666666; text-decoration: none; text-align: left; margin-bottom: 5px; font-size: 11px;}

.pagelinks a:link {
    font-family: Arial, Helvetica, sans-serif; 
    color: #000000; 
    text-decoration: underline; 
    float: right; 
    padding-right: 15px;
    display: block;
}
.pagelinks a:visited {
    font-family: Arial, Helvetica, sans-serif; 
    color: #000000; 
    text-decoration: underline; 
    float: right; 
    padding-right: 15px;
    display: block;
}
.pagelinks a:active {
    font-family: Arial, Helvetica, sans-serif; 
    color: #000000; 
    text-decoration: underline; 
    float: right; 
    padding-right: 15px;
    display: block;
}
.pagelinks a:hover {
    font-family: Arial, Helvetica, sans-serif; 
    color: #666666 ; 
    text-decoration: none; 
    float: right; 
    padding-right: 15px;
    display: block;
}
.style6 {
    color: #CC0000;
    font-weight: bold;
}
.sixphase {
    color: #CC0000;
    font-size: 13px;
    font-weight: bold;
}
#sixphasetext {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    margin-left: 50px;
}
.style7 {color: #FFFFFF}

img.title {
    padding: 8px 0px 0px 10px;
}
img.title2 {
    padding: 5px 0px 0px 10px;
}
img.govtlogos {
    padding: 10px 0px 5px 5px;
}
img.usbgc {
    padding: 0px 15px 15px 5px;
    position: absolute;
    bottom: 0px;
    right: 355px;
}
img.right {
    float: right;
    height: 374px;
    width:  355px;
}
#container {
    background: #FFFFFF;
    width: 924px;
    height: 577px;
    border: hidden;
    border-width: 0;
    margin: auto auto auto auto;
}
#toplinks {
    background: url(images/topbar.jpg);
    padding: 9px 20px 0 0;
    height: 24px;
    width: 904px;
}
#image1 {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 0px;
    top: 0px;
}
#image2 {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 0px;
    top: 0px;
}
#image3 {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 0px;
    top: 0px;
}
#image4 {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 0px;
    top: 0px;
}
#image5 {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 0px;
    top: 0px;
}
#surveycontent {
    background: #FFFFFF;
    position: float;
    padding: 10px 10px 10px 10px;
    height: 374px;
    width: 903px;
    left: 0px;
    top: 0px;
}
#content {
    position: relative;
    background: #FFFFFF;
    height: 374px;
    width: 924px;
}
#footer {
    clear: both;
    text-align: center;
    background: url(images/bottombar.gif);
    padding-top: 8px;
    height: 22px;
    width: 924px;
}
#thumbs {
    position: absolute;
    margin: 11px 15px 10px 15px;
    width: 57px;
    height: 353px;
    top: 0px;
    right: 355px;
}
Thanks for your help!!!
DrSeuss is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Where is this gap coming from????!!
 
Previous Thread | Next Thread Webmaster-Talk.com > Coding Talk > CSS Forum > Where is this gap coming from????!!

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Webmaster Resources Marketplace:
Software Development Company | Webhosting.UK.com | Text Link Brokers 


   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.12503 seconds with 12 queries