|
CSS - Weird Css Spacing Problem
Hey guys,
First post here. I've scoured the web for answers, searched this forum, and visited many CSS sites (alistapart, maxdesign.com.au, positioniseverything, htmldog, etc.) and haven't seen a problem like this. I'm learning CSS as we speak (or more correctly, as I type), and here's the issue. I have a space between my #header and #page. I can't get rid of it unless I put a border around the #page. I've posted four screens here so you can see what's going on in Safari and Firefox (the two browsers I use). #1 is what the site looks like now (as the code is below). #2 is with the #header removed, #3 is with the #header removed and a 1px border put around the #page, and #4 is with the #header there and the #page has a 1px border. It seems to me that the #page has a top margin, and I've tried margin-top: 0px; and tons of other combos, but I can't get that space to go away unless I put a border around #page. Here's my css: Code: /* basic elements */
body {
font: 8pt/16pt georgia;
color: #000000;
background: #AEAEAE url(images/butterflybg.gif) no-repeat top center;
}
p {
font: 8pt/16pt georgia;
margin-top: 0px;
text-align: justify;
}
h1 {
font: italic bold 14pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
h2 {
font: normal bold 12pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
h3 {
font: normal 12pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
a:link {
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #D4CDDC;
}
a:hover, a:active {
text-decoration: underline;
color: #9685BA;
}
/* divs */
#header {
background: url(images/2006_Header.png) no-repeat;
width: 697px;
height: 127px;
padding: 0px;
margin: 0px auto;
}
#page {
width: 697px;
background: url(images/2006_WideExt.png) repeat-y center;
margin: 0px auto;
padding: 0px;
}
#nav {
background: url(images/2006_LNav.png) no-repeat left;
padding: 0px;
margin: 0px;
width: 175px;
height: 306px;
float: left;
}
#content {
background: none transparent;
margin-top: 0px;
}
#text {
}
#footer {
text-align: center;
}
And my html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title></title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> </div> <div id="page"> <div id="nav"> </div> <div id="content"> <div id="text"> <p>put text here</p> </div> <div id="footer"> <a href="http://devshed.com" title="Forums">xhtml</a> </div> </div> </div> </body> </html> Am I overlooking something simple? Similar TutorialsI haven't tried this before, so if I'm way off beat, I'll take directions. What I'm trying to do is take a psd file and make a webpage from it. So far, I think I've got the images cut correctly. I tried using divs to begin with, but found I had to apply position:relative to compensate for extra spacing coming after images and divs. I'm placing an image then a div then an image. The spacing between the two are different. I've tried padding:0 and margin:0 just about everywhere I could think of putting it, but that didn't fix it. So, I used RP. But, after getting it to look right in Safari, but not Firefox [just checked before posting here], I found that making the text bigger caused the divs and images to overlap. So, I thought about tables. Yeah, same thing, so I figure I must not know something pretty basic and was wondering if anyone could help. Both pairs of files validate. Here are the links for the: div based layout and it's css file AND table based layout and it's css file Just in case this looks absolutley nuts on other browsers, here is a picture of where I'm trying to get to. I'm feeling a little tortured over this one So I have the following website: http://www.itmustbecollege.com/ and it has a problem SOMEWHERE that I can't seem to figure out. The problem is that all of my pages now have a big "space" on the far right, forcing a huge horizontal size. I have tried to debug but can't seem to find out the exact problem. It is weird, because certain parts of the website have a "width: 100%" yet ENDS at the correct look, yet there is still that huge space! I just launched my first website and I am having a little problem with spacing, it is pretty obvious. I tried the _ hack, and I played with some padding, but I couldn't get the thing to budge in IE. the site is (psugmb.com) Please help! Thank you! ::Kyle I'm stumbling through learning CSS with the help of some great people (here and elsewhere), and I've almost got a complete, working template, but I'm having a problem with (surprise) IE. I'm using nav boxes on the left and the right, and within the nav boxes I'm using unordered lists to define the menu options. In Firefox it works perfectly, in IE it adds an additional space to the bottom of each list item. Does anyone have any clue what's going on? I've tried to define the margins to 0, but that doesn't seem to do anything. http://www.mcconaha.com/css_refined.php http://www.mcconaha.com/css_refined.css Code: <div class="navbox">
<h3>Navigation</h3>
<ul>
<li><a href="#">. News</a></li>
<li><a href="#">. Junk</a></li>
<li><a href="#">. Pics</a></li>
<li><a href="#">. Downloads</a></li>
<li><a href="#">. Links</a></li>
</ul>
</div><!-- end navbox -->
Well, I am stumped as they say. I have a horizontal menu bar which I am unable to get it to display with the same amount of space above and below it with IE and firefox. So if you would take a look at this page http://www.cacct.com/new/mission.php and here is the style sheet http://www.cacct.com/new/css/sitestyle.css The menu content is called by a php include. Notice the difference between IE and firefox. What I would like is the same amount of light blue above and below. Things I have tried... Adjusting the padding and margins to header and maincontent. Tried placing the menu bar in a div but in Firefox the bar actually hangs over the bottom edge of the div. I put a border around the div so I could see it. In IE it is contained within the div (though it is a bit too long for a single line there so wraps around). This probably wouldn't work anyway since the menu is a drop down and needs to overlap the maincontent. Just to look at it, I moved the menu bar up to different places. Inside the header below the address still same problem. Between the logo and address same problem. When I move it to the top, above the logo it appears to be the same distance from the top of the border. So, anyone have any ideas on how to get that spacing the same? tk On this page: http://www.poweredpages.com/newtarget/ctia/ there's an spacing problem in IE. Hover over one of the links on the main bar to get the sub link tray. Hover over the first two links in a vertical set, and it will work fine. Hover over the THIRD link, and in that link and any link below it there's extra padding on the top of it. But all these links have the exact same CSS associated with them. Very odd. Works fine in FF. Here's the code and the CSS: Code: <div id="showtray" class="tray" onmouseout="hide('showtray','linkinfo')" onmouseover="show('showtray','linkinfo')">
<div class="traynav">
<ul>
<li><a href="/info/">General Information</a></li>
<li><a href="/info/registration_packages.cfm">Registration Prices & Policies</a></li>
<li><a href="/info/keynote_sessions.cfm">Keynote Sessions</a></li>
<li><a href="/exhibit/">Exhibit Floor</a></li>
<li><a href="/info/ed_sessions.cfm">CTIA Educational Sessions</a></li>
</ul>
</div>
<!-- 5 links to a column ONLY! Any more and start a new column, lke this one -->
<div class="traynav">
<ul>
<li><a href="/info/seminars.cfm">Partner Seminars</a></li>
<li><a href="/info/green.cfm">Green Practices</a></li>
<li><a href="http://www.ctia.org/conventions_events/convinfo/info.cfm">Receive Information</a></li>
<li><a href="/info/international.cfm">International Guests</a></li>
</ul>
</div>
<div class="trayimage whitetext smalltext"><img src="images/show.jpg"><br />Stars of the Show</div>
</div>
Code: .tray{
position:absolute;
z-index:500;
top:30px;
left:0px;
visibility:hidden;
background-image:url(../images/blackback.png);
width:920px;
height:130px;
border-bottom:3px solid #4CADCE;
padding:20px
}
.traynav{
float:left;
padding-right:15px;
}
.traynav ul{
margin: 0px;
list-style-type: none;
padding: 0px;
clear: both;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
border-top: 1px dotted #c2dae2;
}
.traynav ul li{
list-style-type: none;
padding: 0px;
clear: both;
border-bottom: 1px dotted #c2dae2;
font-size:11px;
margin:0px;
width:200px
}
.traynav li a:link, .traynav li a:visited {
color: #FFFFFF;
display: block;
background-image: url(../images/arrow_orange.gif);
background-position: 4px 7px;
background-repeat: no-repeat;
padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 15px;
text-decoration: none;
}
.traynav li a:hover, .traynav li a:active {
background-color:#4cadcf;
}
.trayimage{
float:left
}
.trayimage img{
border: 1px dotted #c2dae2;
}
Thanks In IE, there is a space between my div's. Can someone help me fix it? Attached is a sample htm and graphics or see he PHP Code: <div id="red" align="center"> <img src="red.gif" width="500" height="100"> </div> <div id="blue" align="center"> <img src="blue.gif" width="500" height="100"> </div> Thanks. Hi there! Please have a look here. As you can see there's a scrolling box with a overflow:auto propriety set. All works well either in Firefox and Internet Explorer, but I had to use a hack to made it work with IE: Code:
#content {
position: relative;
margin-left: auto;
margin-right: auto;
padding-right: 25px;
padding-left: 25px;
font-family: Verdana,Arial,helvetica, sans-serif;
font-size: 11px;
text-align: justify;
overflow: auto;
width: 543px;
height: 225px;
background-image: url(img/centerblank.jpg);
background-repeat: no-repeat;
_background-attachment: fixed;
}
FF doesn't read the _background-attachment so all works fine.. problem is, this way the css code is no w3c compliant. Any ideas? So, I have my CSS, works wonderfully (well, as expected) in FF2. Unfortunately, IE7, Safari 3, and Opera 9 all seem to ignore the whole stylesheet. UNLESS! Any one of the properties in the sheet is declared !important. Then, it applies the entire sheet the way I expect. What gives? The way I understand (understood?) specificity, the !important flag should only effect the specific line it's applied to, not the entire sheet. Right? I'm really confused. The stylesheet is included last, so all else being equal, should cascade properly and override the other sheets. Any ideas? I'm just going to use the !important for now, but I really don't like that. MPEDrummer Hey guys, I was wondering if you can help me out with something. On my blog I couldn't figure out how to get the page to align to the top, so I had to use a negative margin on the header. Well now it's fine in firefox, but looks all botched in IE. What a surprise, right? Can you take a look at help me figure out what I need to fix? www.illuminatedmind.net Thanks! I'm having a slight problem with the appearance of the border for the DIV below the navigation bar. Firefox runs the border through the entire width of the DIV, but IE stops the bottom border as soon as the last <LI> is reached.. Any ideas guys? Thanks in advance. http://www.manliusvillage.org/test/index.html The related CSS is below: Code:
#navigation{
height:2.2em;
line-height:2.2em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}
* html #navigation a {width:1%;}
#navigation .selected,#navigation a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}
#sublinks{
float:left;
height:1.4em;
line-height:1.4em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}
#sublinks li{
float:left;
list-style-type:none;
white-space:nowrap;
border-right:1px solid #578bb8;
}
#sublinks li a{
display:block;
padding:0 5px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}
* html #sublinks a {width:1%;}
#sublinks .selected,#sublinks a:hover{
color:#000000;
text-decoration:none;
}
Hi guys, I'm at the end of my rope about this. I have a three-column layout which is behaving fine in mozilla. IE, as usual, is causing problems. I've given the troublesome column a background color of yellow to emphasize the problem. There's a right padding sort of thing going on that's forcing the right-most column out of its place; might be easier if you just look at it: http://www.teamsnowvalley.com/home.php (still a work in progress. just sayin) the css behind the column: #content .left { float:left; padding-right:9px; background:yellow; width:179px; voice-family: "\"}\""; voice-family:inherit } html>body #content .left { width: 179px; } Can anyone tell what i'm doing wrong? Many thanks, M Hi, I have developed a page using only CSS with html. That means I have two files at the moment, layout.css and default.html. When I test it on my computer it works fine on IE6.0, Firefox, Netscape and Opera. I then decided to give it a go on the live internet. I created an account with geocities and uploaded all the required files. Now, when I loaded the page from IE6.0 the website is broken. Which means it is not displaying as it was when I was loading it from my computer. However Firefox and Opera are loading it fine. For me this is just weird, since if I download the html from the page (right click, view source), save it on my pc, and load it again from my computer (locally), it works fine on IE6.0 again. I know how I could solve this problem, however should I try solving this problem if my page is displaying fine on my computer (on the three browsers) but incorrectly on geocities? Ps: I am only using geocities for testing. Regards, Sim085 Hello. I've got a header div that my banner is in, below that, another div called "welcome". The background-color I set on the welcome div is somehow appearing at the very top of the container, right above my banner... I've tried adding a height to it but that just makes it worse. Not sure what else to do... The site is LeetWebmasters. My css: Code: p {
margin:0px;
padding:0px;
color:#006699;
line-height:20px;
}
h2 {
padding:0px;
margin:0px;
font-size:24px;
color:#006699;
font-weight:100;
border-bottom:1px dotted #ccc;
}
h3 {
padding:0px;
margin:0px;
color:#006699;
color:#006699;
}
html,body {
padding:0px;
margin:0px;
background-image:url(main-bg.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#container {
margin: 0 auto;
width: 922px;
}
#header {
width: 922px;
float: left;
height: 130px;
margin: 10px 0px 5px 0px;
}
#leftcolumn {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 5px 5px 0px;
padding: 10px;
height: 900px;
width: 195px;
float: left;
}
#welcome {
text-align:center;
padding:5px;
background:#EAEAEA;
color:#006699;
}
#latest_tuts {
color:#006699;
}
#latest_tuts h3 {
border-bottom:1px dotted #ccc;
}
#who_online h3 {
border-bottom:1px dotted #ccc;
}
#search {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#newsletter {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#welcome a:link {
color:#0066CC;
}
#content {
color: #333;
margin: 0px 5px 5px 0px;
padding: 10px;
width: 456px;
display: inline;
float:left;
background-image:url(content_gradient.jpg);
}
#content a:link, a:visited {
color:#0066CC;
}
#rightcolumn {
color: #333;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 0px 5px 0px;
padding: 10px;
height: 900px;
width: 196px;
float: left;
}
#footer {
text-align:center;
width: 900px;
clear: both;
color: #878787;
border: 1px solid #ccc;
margin: 0px 0px 10px 0px;
padding: 10px;
height:35px;
font-size:12px;
background-image:url(footer_gradient.jpg);
}
#footer a:link {
color:#0066CC;
text-decoration:none;
}
#footer a:visited {
color:#0066CC;
text-decoration:none;
}
#footer a:hover {
color:#006699;
}
#menu3 {
width: 200px;
border:1px solid #BCD2E6;
border-style: solid solid none solid;
}
#menu3 li a {
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #8BADCF;
display: block;
background: url(menu3.gif);
padding: 8px 0 0 10px;
}
#menu3 li a:hover {
color: #627EB7;
background: url(menu3.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#menu3 li {
list-style:none;
}
#menu3 ul {
padding-top:0px;
margin-top:0px;
padding-left:0px;
margin-left:0px;
margin-bottom:0px;
}
#description {
font-size:10px;
color:#006699;
}
Ok, I finally constructed the basic layout. But, I've encountered yet another problem. There seems to be a space for some odd reason between one of my images in the content div and one of the images in my news div. I want them to sit flush. Here's an image to show what my problem is: http://www.octavewebdesign.com/csshelp/spaceproblem.gif Here is the actual website: http://www.octavewebdesign.com/chilesxc/index.html The css can be found he http://www.octavewebdesign.com/chilesxc/style.css Any tips would be great. Please view in FF, as IE seems to mess it up... which is another problem for another day. Thanks. -Justin (but, if anyone has any solutions for the IE problem then that would be great to add it. For some reason IE makes the margins larger than they're supposed to be. The margin is set to 39 px, but it acts like a 50px margin for some weird reason. This causes the menu div to drop down below the content div.) hey guys i'm having a problem with CSS line spacing. firefox is displaying correctly of course, and IE is scrunching the lines closer. here is an example (firefox on the right, IE on the left): here is the CSS: Code: #galleriesTextContainer
{
height: 130px;
margin: 0px;
padding: 0px;
margin-left: 8px;
line-height: 8pt;
}
.galleriesText
{
margin: 0px;
padding: 0px;
color: white;
font-family: Arial, Verdana, Sans Serif;
font-size: 11px;
}
Code: <div id="galleriesTextContainer"> <span class="galleriesText">dolphy day 2005 (132 images)<br />dolphy day 2004 (101 images)<br />buffalo wild wings (47 images)<br />lemoyne 2005 (425 images)<br />lemoyne 2004 (28 images)<br />lemoyne 2003 (147 images)<br />syracuse nationals 2004 (43 images)<br />nyc / jersey 2005 (245 images)<br />minutes monte (29 images)<br />my truck (67 images)<br />phil's t-type (70 images) </span> </div> Hi, Why there is such a big vertical space between table and element (div class="frm_container) in Internet Explorer 6. There is no space like that in Mozilla Firefox. What can I do about it? Thank you. Code:
<head>
<title>Title</title>
<style type="text/css">
.frm_container {
padding: 0px;
margin: 0px;
border: 1px solid #000;
background-color: #fff;
}
</style>
</head><body><div class="frm_container">
<form name="register" enctype="multipart/form-data" method="post" >
<table><tr>
<td align="right">Username:</td><td><input type="text" name="user" /></td>
</tr></table>
</form></div></body></html>
hey, i have a page that includes several flash files.. since its a translation company i have made a page in Russian but the upper flash menu refuses to appear in firefox but displays in internet explorer.. other flash files appear.. and i don't know if its related but in order to make the Russian appear correctly i had to save the php page as utf-8 with no BOM... appreciate any help since i am clueless as to this weird problem here is the page address : bit.ly/4SqdNw sorry new in the forums could not link it but copy and pase Hello, First off, if you know of a way to make round cornered boxes (that stretch hor and vert) in css using less than 6 divs, please be my guest. Now the problem I'm having is IE specific, when i load up the IE DOM inspector, i see that all the divs before the bottomleft div have a height that too big. i don't know what this could be from because i never set a height attribute for any of the divs. http://72.29.74.19/~majdkgf/tangerine/ NOTE: this doesn't happen to the last box The site is question is: http:// w ww.stolen-bikes.org/index4.php The CSS is: http:// w ww.stolen-bikes.org/css/non_ie.css Basically I want the sidebar (blue div), to line up on the side as it is but up flush against the top as you would expect a floated content area with a floated sidebar next to it. If I take out the #sidebar in the css it DOES align right up at the top as I want it to. The minute you as a float:left or width or anything it jumps down to the end of the #masthead div and beginning of the #content div. Im pretty sure I have everything lined up correctly I just cant figure out why this is doing that! Please help! |
|||||||