|
CSS - Odd Space Above My Layout In Firefox
I 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. Similar Tutorialshttp://www.ilumos.co.uk/site/ http://www.ilumos.co.uk/site/styleDefault.css Ok, I'm trying to make a page layout for my site, and on the left I have a navigation bar (#sidebar), which I'd like to fill the whitespace between it and the footer (#footer) (but not dissapear behind the footer, height: 100%). I'd also like to fill the whitespace between the left of the main (#main) div and the edge of the page, and the whitespace under the div too. If there's a non-hacky solution to this I'd love to hear it, but if there isnt, and there's a way to change my CSS/HTML to get the same result I'd still be interested. Thanks loads, ilumos hello all, i recently tried to implement a layout which fills the available screenspace, with the main content area as scrolling box. I thought i succeeded, because firefox shown no problem, but when looked in IE, IE is very slow to render it, making it just unusable. I've been looking for a way around ,but i'm out of luck so far, so i thought i'd seek advise on this forum. Maybe you can tip me in the right direction ! An image is worth a thousand words, so please have a look at the attached image, it summarizes the screen structure. As you can see, the only scrollable area is the center orange zone : "viewport". thank you for your time and help ! Alexandre 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! 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 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;
}
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. 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 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. Hi, I'm having a problem with a layout in Firefox. http://26990.vws.magma.ca/press-room.cfm As you can see the content area is all shifted down and lines up with a block in the menu. It doesn't do this in IE and I need it to work the same way in Firefox. Can anyone offer some suggestions as to what I can change to get it to work? http://925-sterling-silver-jewelry....udes/header.php well this is my first proper CSS based site but i am having troubles with it. the problem is that in IE the div (main) starts near to the sidebar div, wheras in firefox it starts a bit further away! also at the moment the links at the bottom dont appear in IE but do in FF albeit little messed up. help please? hi, I wonder if anyone can help with my layout problems in Firefox, i have tried to have vertically alignment on the whole page, its looks ok in IE but not FF. Im fairly new to CSS so if anyone can spot what i have done wrong that would be great link to layout here thanks I've been working with this issue for the better part of the day, and I think whatever the issue is, is one I'm not seeing because I've been doing just that. So I'm hoping to get a little guidance from those of you who're far superior to me in the world of CSS. On this site ianrobinett.com/designwork/SAMPO/Sitev1/ I've been working on, in Mozilla, the fullwidth div I put below my other divs (in the main body content area), is appearing off to the right of the Twitter widget. In Chrome and IE, funny enough, it's right, and it's Mozilla having the fit. I honestly figure this is something small, and something I'm just missing because I've been looking at the code all day. Dear All, I have a problem with viewing my page in firefox. The Tree Div moves to the right and pushes the other divs down. Please check this temporary URL page. It works fine with IE 7 but FF it creates problems. http://82.147.208.5/MapsoluteTest/Default.aspx The css file is given below Code: #hdr {
height:80px;
padding-top : 5px;
padding-left : 5px;
background:#FFFFFF;
border-color: #EEEEEE;
border-width : 1px;
color: #333333;
text-align:center;
}
#body_block
{
position:relative;
background: white;
color: #333333;
height:500px;
padding : 200px;
}
.TopBar
{
height:84px;
padding-top : 5px;
padding-left : 5px;
background:#C9E2FF;
border-bottom-color:#EEEEEE;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;
}
.TreePanel
{
float:left;
width:220px;
height:700px;
border-color : Navy;
background-color:#FFFFFF;
padding : 10px;
overflow:scroll;
}
.mapView
{
height:600px;
float:left;
text-align :center;
padding-left:150px;
padding-top: 40px;
}
.mapView1
{
height:600px;
float:left;
text-align :center;
padding-left:60px;
padding-top: 40px;
}
.mapView2
{
height:470px;
float:left;
text-align :center;
padding-left:150px;
padding-top: 40px;
}
.gridView
{
width: 950px;
height:200px;
float:left;
left:25px;
text-align:center;
overflow: auto;
padding-top: 10px;
border : solid 1px black;
}
.roundedPanel
{
text-align:center;
padding-top:5px;
padding-bottom:5px;
background-color:#e4e4e4;
}
.brDefinition
{
text-align:center;
width:500px;
min-height : 750px;
border-right : solid 1px black;
float:left;
padding-left:20px;
padding-right:20px;
}
.brAssignment
{
text-align:center;
width:757px;
float:left;
height : 500px;
border-right : solid 1px black;
border-left : solid 1px black;
}
.brPanel
{
float:left;
width:220px;
height:500px;
border-color : Navy;
background-color:#FFFFFF;
padding : 10px;
overflow:scroll;
}
.BRTreePanel
{
float:left;
width:220px;
height:500px;
border-color : Navy;
background-color:#FFFFFF;
padding : 10px;
overflow:scroll;
}
.BRGrid
{
height:300px;
padding : 10px;
text-align: center;
border-top : solid 1px black;
}
#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}
#UpdateProgress1, #UpdateProgress2, #UpdateProgress3, #UpdateProgress4 {
width: 300px; background-color: #FFC080;
bottom: 0%; left: 0px; position: absolute;
}
I am not good in CSS. Please help. Thanks in advance. Regards, Noorul I developed a site and finally thought about opening it in IE... everything lays out perfectly in firefox and looks great. i opened it in IE and my sidebar that should be on the right, is showing up under the main content area vs on the right of it.. any suggestions? you can see the site in development he rurdesign dot com / OffRoadSolutions/ Hi There, For the last year I've been using a standard CSS layout with 2 columns held within a container. The problem is (and I know this is certainly a common problem) that the left column MUST be longer than the right column or else it flows over and following DIV elements in Firefox. Internet Explorer has no problems with the right column being longer than the left. An example of this is here (to be viewed in Firefox): hosteltrail.com/colombia/example/ Thus far, I've had to manually increase the length of the left column in the instances when it is shorter than the right by simply adding an empty div box. Below is the setup for the page container. #columncontainer { position:relative; margin:auto;width:750px; } #rightcolumn { float:right;width:355px; } #leftcolumn { width:355px; } Does anyone know of a solution to the firefox problem other than adding a div box as a fix? |
|||||||