|
CSS - Odd Space Problem In Firefox
Hi Ya'll,
I am currently working on a site and am having a few issues with Firefox. One of the issues is a big space that appears in a product display page between the first and second product. The spacing between the rest of the products is always correct. Since this page is generated from a database I can't understand why the gap only appears in that place and not anywhere else. The code for each block is the same: http://www.cdrom-businesscard.co.uk...?category_id=19 Thanks for any pointers! Similar TutorialsI created what I thought was a simple layout using css, but I have some odd space above my layout in Firefox that I can't get rid of. The background peeks through above the text at the top so it's easy to see: http://sundaysermons.heikou.net/brickaday/ As you can see, the layout should be flush against the top of the browser. I renders correctly in IE but not in Firefox. I checked my code and both the html and css validate so I'm assuming there's something wrong with my css: Code: body {
margin: 0px;
padding: 0px;
font-family: Arial, Verdana, sans-serif;
font-size:12px;
color: #000000;
background: #FFFFFF url(images/bg.gif) repeat-y left;
}
#heading {
height: 44px;
}
#heading h1 {
font: bold 18px "Trebuchet MS", Tahoma, Arial, "Microsoft Sans Serif";
color: #E77F04;
text-align: left;
}
#banner {
height: 73px;
background-color: #E29722;
border-top: 1px solid #9D3E1F;
border-bottom: 1px solid #9D3E1F;
}
#tagline{
height: 17px;
background-color: #F0DCA2;
border-bottom: 1px solid #9D3E1F;
}
#leftcontent{
width: 210px;
background-color: #FCF1D0;
padding-top: 20px;
}
#leftcontent ul {
margin-left:0;
padding-left:0;
display:inline;
}
#leftcontent ul li {
margin-left: 0;
list-style: none;
padding-left:10px;
line-height:26px;
}
#rightcontent{
width: 470px;
float:left;
}
Any help you guys could give me would be greatly appreciated. Thanks. I dont understand why the textboxes at the following site have no spaces in between unlike with ie. http://www.refinethetaste.com/html/?Section=myaccount&SubSection=signup Well from everything I can read this has something to do with collapsing margins; however, I have maintained a 0 margin, padding, and border throughout the document and just now does this space problem appear. If you pull up the page in IE I have a black bar directly underneath my nav bar. In Firefox that black bar appears about 10 pixels or so below the nav bar. What gives? I have tried everything and nothing works. If anyone can please look at what I have so far I would appreciate it. Thanks again. The CSS is in the HTML doc (no seperate CSS file yet) Link: http://trinitylifebaptistchurch.org/test/index3 i am currently making a page which makes use of some JS that swaps between three div containers by changing the display to hide on all but one... anyhow... i here is the page.. if you click on "best reviews" it adds a huge gap but if then click on "worst reviews" the gap disapears clicking back onto "best reviews" the gap is gone too... it is very tricky... i've used this JS before, and it worked fine... and it this page looks and acts fine in IE6... i just thing the space of one of the containers is remaning, even tough it is being hidden... here is the page... i've put a 1px dashed #900 border around all divs so as to make it easier to debug... Mini Catalog Hello. I have just finished migrating my vbulletin template to XHTML 1.1 strict and it validates just fine. The css shows 2 errors but they are known and have no effect on the display (effective for windows resizing). My question is why do I have ~500px of white space to the site of my http://forums.xedge.net ? I did a * { border: 1px solid red; } to see where the space lined up in the scheme of things and it looks like it's part of the main div (siteWrap). Code:
/* *** This wrapper sizes the appearance of the entire site *** */
div#siteWrap {
width: 95%;
min-width: 770px;
margin-left: auto;
margin-right: auto;
background-color: #606A8C;
}
siteWrap sets the page to render at 95% of the current window. I also have a div for contents which gives 15px to the left and right to give spacing for all following elements. In researching this problem I have read that percentage widths sometimes can be problematic with static paddings, but it was working at one time. I just can't figure out what I did wrong. The white space only appears in firefox, in ie and opera the site renders perfectly. Thanks. First of all here is the page: http://xander6669.com/ It looks like I want in IE, but there is a still a white space on top of the page with firefox/opera. I've tried hundreds of things but I can't seem to be able to fix it. Anyone could give me a hand? Here is the HTML and CSS: HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/><title>Xander6669</title> <link rel="stylesheet" href="body/body.css"/></head><body> <img src="images/border1.gif" alt="" height="5" width=779"/></body></html> CSS: Code: body {
margin: 0px;
padding: 0px;
}
There is a big amount of space that shows up in firefox and not IE on a page I am trying to develop. temporary site <--- fixed. in a state of constant change. The css is layout.css . I have had two people try to design a template in photoshop for me but they are dragging their butts. I decided to just start without them with a simple template. I know there are problems. I probably coded things wrong and not efficient and the image is also too big. It also doesn't validate if anyone checks that(it is because of my transparencies). I really would like to know what is causing the extra space in firefox. If you have comments on other stuff feel free to comment because this is my first attempt at a css template. Also if anyone has an idea for a design feel free to draw something up. Quick question, can someone tell me why do i get a white space on the right side of the screen http://www.impulsanl.org/testing.htm on IE 7 and IE 8? It seems to work ok with firefox and google chrome. (all screen). CSS code: Code: #extraDiv1 {
background: url(images/header1.png) repeat-x;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
HTML Quote: <div id="extraDiv1"></div> thanks. Hey everyone, I am just touching up an old design I made, and I just noticed that Firefox has a weird white-space next to the top menu. Not sure what is causing it, but it is there. Here is a screenshot of what is happening in Firefox. Also, in IE, the container doesn't extend past the bottom menu. Here is a screenshot of what is happening in IE. So far I am just testing in Firefox 2.0.0.11 and IE7. Here is my code: html4strict Code: Original - html4strict 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" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title></title> <style type="text/css">/* <![CDATA[ */ * { padding: 0; margin: 0; } body { background-color: #6AB2DA; color: #000000; text-align: center; font-size: 13px; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; /* Thank you, Kravvitz */ } a { color: #6AB2DA; } a:focus { outline: 0 none; } #container { margin: 0 auto; text-align: justify; width: 50%; } #page { background-color: #FFFFFF; } #header { background-image: url( http://img443.imageshack.us/img443/8114/bg1bp4.jpg ); background-position: bottom left; height: 120px; width: 100%; } #header span { padding-left: 150px; padding-top: 50px; font-size: 21px; font-weight: bold; letter-spacing: -0.1em; color: #666666; display: block; } #menu { background-color: #6DC3DE; width: 100%; } #menu li { float: left; padding-top: 10px; padding-bottom: 11px; list-style-type: none; } #menu a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; } #news { clear: both; margin-top: 34px; overflow: auto; padding: 15px; height: 100px; border-bottom: 1px solid #0AA; } #news h1 { color: #6DC3DE; font-size: 21px; } #content { margin-top: 15px; padding: 15px; } #content h2 { padding-top: 10px; float: left; color: #6DC3DE; padding-right: 25px; font-size: 31px; border-right: 3px solid #6DC3DE; } #content .info { padding-top: 10px; padding-left: 25px; float: left; font-size: 11px; height: 31px; } #content p { text-indent: 45px; clear: both; border-bottom: 1px dotted #6DC3DE; padding-top: 10px; padding-bottom: 10px; } #bottom { border-top: 1px solid #6DC3DE; margin-top: 10px; padding: 5px; } #bottom ul#one { float: left; } #bottom ul#two { float: right; } #bottom li { padding-top: 10px; padding-bottom: 11px; list-style-type: none; display: block; } #bottom a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; display: block; width: 250px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* ]]> */ </style> </head> <body> <div id="container"> <div id="page"> <div id="header"><span>i.love.summer</span></div> <div id="menu"> <ul> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> </ul> </div> <div id="news"> <h1>welcome</h1> Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. </div> <div id="content"> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> </div> <div id="bottom"> <ul id="one"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> <ul id="two"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Any suggestions would be great. I'm having problems with a web page not viewing correctly in IE7. Here is a link to the page: test(dot)phoenixit(dot)com(dot)au/GBDGP/index(dot)asp The left and right columns should be level (top) with the centre content area. Any help on this would be greatly appreciated. Cheers I am working on a site and have found a problem that I can't explain on my own. I would like someone to look at this site: http://www.canada-training-group.ca and tell me why there is extra space at the top in IE but not in Firefox. Thanks, Timmy-d Thanks for taking the time to read my question. Have posted 2 examples of my problem. Example 1: http://www.pierced.ca/Kelly/indexCOPY.htm Page http://www.pierced.ca/Kelly/kelly1.htm CSS http://www.pierced.ca/Kelly/kelly1.css CSS (this one will download) Here my rounded corners don't line up to the bottom of the "info" area. Not sure why. Example 2: http://www.pierced.ca/Kelly/indexCOPY2.htm http://www.pierced.ca/Kelly/kelly2.htm CSS http://www.pierced.ca/Kelly/kelly2.css CSS (this one will download) Here my rounded corners line up, but I get an extra space under the "menu" section. Not sure why. I am totally stuck. I am not sure how to fix it. I have tried adding height to the menu, but that doesn't work. Thanks for you help, Brad I am building a new page and I'm having problem having this space on top of it. here's the situation. All Divs are inside a Parent Div called Container. This div has the following qualities: body { margin-top: 0; padding-top: 0; background-image: url(images/bg.gif); background-repeat: repeat-x; background-attachment: fixed; background-color:#003366; font-family:Arial, Helvetica, sans-serif; } #container { position:relative; width:1000px; height: 1250px; top: 0; margin-left: auto; margin-right: auto; margin-top: 0; border: 1px black solid; z-index: 3; } If I remove the container Div and just have the child Divs then the space on top disappears and the page goes to the top, however it gets aligned to the left. As you can imagine what I want is the page both centered and on top, so I'm pretty much working with the files that have the container, so that's why I'm trying to fix either I'm assuming there is an issue with the CSS of the menu, because it's the only rare addition apart from the normal CSS. If I do in the main parent container position:absolute instead of relative. it then goes to the top, but it's not centered. I've been working on this all day long but can't figure out a solution, if you can please help me out. Hi guys, I'm having a problem with spacing beneath my image. I have an image at the bottom of a div. When I change the display to block, the space below still remains. When I place the image as a background inside my div it doesn't display. Any help with either or both of these would be great. The page is located he rhodyandcrystal.com/staging/party.html The div on the right has an image as a bg and the div on the left has the image located at the bottom. I just did this so you could see both, and that they aren't working. Thanks again for any help! Duke Hello My problem is maybe a easy to solve one, but I realy don't know how to get it right. I have a list of links and want them equaly vertical spaced between all the line of links. link1 (space) link2 (space) link3 What I got doesn't look right in IE and Netscape at the same time. Is there a css tactic to get it right in both browsers? Please can someone help me? Hi, If you look at the following page you will see there is a gap under the sidebar elements at the top. LINK HERE In FF its not there yet in IE it is, any ideas how i can remove it? Thanks, Mike Hi All- For some reason when I use a bunch of DIV tags to position elements on my page, the page keeps getting longer and longer with white space. Does anyone know what will remedy this extra whitespace? Thanks, infinity003 So i just wrapped up some initial styling for a personal website i'm working on, http://www.sociospatial.com/ Looks fine in firefox. Has some minor issues in chrome/webkit, which I'll iron out later. Haven't dared to load it up in IE yet. In Opera, though, I'm having a problem that I don't know where to start. So without having to paste alot of code, I have a wrapper div and a footer div, just so that I can have the footer hug either the bottom of the viewport or the bottom of the page, whichever is lower. I also wanted some background elements to the page, but I wanted them to hug the bottom as well (load up the page in firefox and resize to viewport to see), so I ended up with something like this: Code: <div id="footer"> <span id="left-bg"></span> <span id="right-bg"></span> </div> and the styling for these is something like (I can post the actual/more if need be) Code:
div#footer {
position: relative;
height: 25px;
width: 100%;
}
span#left-bg {
position: absolute;
left: 0;
bottom: 0;
width: 400px;
height: 600px;
background: transparent url(some-url.png) no-repeat 0 0;
z-index: -1;
}
span#left-bg {
position: absolute;
right: 0;
bottom: 0;
width: 400px;
height: 600px;
background: transparent url(some-url.png) no-repeat -400px 0;
z-index: -1;
}
in firefox/webkit at least, these function as i want, so I have 2 spans that spill up through the top of the containing footer div, but still hides behind normal content. If my wrapper content is minimal, it appropriately hugs the bottom of the viewport and i don't have any vertical scrollbar. If I have a lot of content in the wrapper, I have a vertical scrollbar, but the footer and the spillout background elements are all waiting for me at the bottom of the page. in opera (9), the two spans hug the bottom of the (initial) viewport as I would hope, but I *do* have a vertical scrollbar (even when the content in the wrapper does not necessitate it), and scrolling down reveals that I have a *huge* amount of space that's just empty body background below the footer. This empty space seems vaguely correlated with the "height" values of the spans (the lower the height value, the smaller the empty black background space under the footer), and the vertical scrollbar goes away completely under one of these conditions: a) i add "overflow:hidden" to the div#footer styling (but of course this stops the span elements from spilling through the top) b) using the W3-dev opera tools, if I disable both spans c) after I disable both spans, I enable only one or the other (if I just disable one after both have been enabled, the vertical scrollbar stays, so I have to disable both first). i'm not quite sure what exactly is going on here, nor really what issue I'm trying to track down (I don't know what to enter for a google search, for example) - I'm kind of new at this. Anyone have any clues to contribute? I'll add more information if needed. |
|||||||