|
CSS - Layout Problem With Firefox 2 And 3
Hi Guys,
I'm having a bit of an issue with the layout of my new site. I have got it working in FF3, ie 6 and 7 using conditional comments, but now I have a problem where FF2 is giving me the same problems as what ie was giving me. As far as I know you can't use conditional comments to differentiate between FF 2 and 3. I wish I could narrow down the problem further, but I am just completely lost. Please could you guys have a look at http://www.action-figure-world.com/index.html and tell me what I could do to fix the problem. Thanks a ton! Similar Tutorialsthe web page contains the following contents PHP Code: <body> <?php include("1banner.php");?> <div id="frame"> <div id="contentleft"><?php include("1links.php");?></div> <div id="contentcenter"> <div class="heading-main" align="center" ><p>Code/Script Writing</p><br></div> </div> <?php include ("1footer.php");?> </div> </body> the footer page should display at last but it display at top of the page i couldn't find error in CSS and page. This page is displaying properly in IE and problem is only in Firefox. Thanks in advance for help. the CSS used here is Code:
#contentleft {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 11px;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
WIDTH: 233px;
PADDING-TOP: 0px;
FONT-FAMILY: Arial,Helvetica,sans-serif;
}
#contentcenter {
FLOAT: right;
MARGIN: 0px;
WIDTH: 542px;
}
#content250{
MARGIN: 4px 2px 0px 3px;
WIDTH: 252px;
TEXT-ALIGN: left;
float: left;
}
#content250a{
MARGIN: 4px 3px 0px 2px;
WIDTH: 252px;
TEXT-ALIGN: left;
float: right;
}
#conteninbuilt {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND: #ffffff;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
WIDTH: 255px;
PADDING-TOP: 0px;
FONT-FAMILY: Arial,Helvetica,sans-serif;
border: 1px solid #CC6600;
}
#frame {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px auto;
WIDTH: 775px;
PADDING-TOP: 0px;
TEXT-ALIGN: left;
border: 1px solid #333366;
background-image: url(../box-bg/body_left_color.gif);
background-repeat: repeat-y;
}
#sitemap {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px auto;
WIDTH: 775px;
PADDING-TOP: 0px;
TEXT-ALIGN: left;
border: 1px solid #333366;
}
.bg1 {
background-image: url(../box-bg/body_left_color.gif);
}
.bg-webname {
background-image: url("../images-new/web-name-bg.jpg");
}
.bg-v-boarder {
background-image: url(../box-bg/bg_dots.jpg);
background-repeat: repeat-y;
background-position: 5px;
}
.bg-h-boarder {
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
border-bottom-width: 2px;
border-bottom-style: dotted;
}
.bg5 {
background-color: #006633;
}
.banner-offer-ad {
background-image: url("../images-new/free-offer.gif");
}
.bg-banner {
background-image: url(../box-bg/bg_banner.jpg);
background-repeat: repeat-y;
}
.boarder-1px-blue {
border: 1px solid #3333FF;
margin-top: 5px;
margin-bottom: 5px;
}
.boarder1 {
border: 1px solid #990000;
}
.boarder2 {
border: 2px solid #333399;
}
.boarder3 {
border: 1px solid #FF6633;
}
.bullet1-links {
background-image: url(../box-bg/bullet.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333399;
font-weight: bold;
background-position: 3px 8px;
padding-left: 22px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999999;
margin-top: 5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 10px;
width: 200px;
}
.bullet2-links-sub {
background-image: url(../box-bg/circle1.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #3366CC;
font-weight: bold;
background-position: 15px 2px;
padding-left: 40px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999999;
margin-top: 5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 10px;
}
.bullet3-content {
background-image: url(../box-bg/bullet3.gif);
background-repeat: no-repeat;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
font-weight: normal;
background-position: 10px 5px;
padding-left: 20px;
padding-top: 0px;
padding-bottom: 1px;
margin-top: 0px;
margin-bottom: 0px;
line-height: 15px;
}
.contact-photo {
background-image: url("../images-new/web_title_ad_welcome_page.jpg");
background-repeat: no-repeat;
background-position: right center;
}
.heading-main {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 160%;
color: #333366;
font-weight: bold;
margin-top: 10px;
margin-bottom: 0px;
}
.heading-sub1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding-bottom: 5px;
margin-bottom: 1px;
color: #666600;
margin-top: 5px;
}
.heading-sub2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-right: 5px;
margin-left: 5px;
}
.links-menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #006699;
background-image: url(../box-bg/circle1.gif);
}
.margin-5px {
margin-top: 5px;
margin-bottom: 5px;
}
.margin1 {
border: 1px solid #333399;
padding: 20px;
margin: 2px;
}
.margin2 {
margin: 1px;
padding: 2px;
border: 1px solid #003333;
}
.margin3 {
margin: 5px;
}
.text-normal {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 22px;
margin: 1px 5px;
color: #333333;
}
.text-normal-left-margin {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
margin: 0px 0px 0px 10px;
color: #666666;
}
.webname {
background-image: url("../images-new/web_name.jpg");
background-repeat: no-repeat;
background-position: left center;
}
.bg-security {
background-color: #FFCC00;
}
#navigation a
{
color: #006633;
background: #ffffff url(../box-bg/bg-1left-cornor.gif) no-repeat left top;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 40px;
margin: 10px;
padding: 1px 10px 10px 0px;
}
#navigation a span
{
background: url(../box-bg/bg-2right-cornor.gif) no-repeat right top;
padding: 1px 0px 10px 20px;
}
.box-light-blue {
background-color: #E9F7FE;
width: 300px;
border: 1px solid #333399;
}
.footer {
background-image: url(../box-bg/bottom_back.gif);
height: 30px;
width: 775px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #003399;
border-bottom-color: #003366;
background-repeat: repeat-x;
background-position: bottom;
}
.heading-sub3 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13pt;
color: #333399;
font-weight: bold;
margin-top: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
.heading-sub4 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
padding-bottom: 5px;
margin-bottom: 1px;
color: #993300;
margin-top: 5px;
}
.float-right {
float: right;
margin-bottom: 5px;
margin-left: 5px;
}
.bullet4 {
background-image: url(../box-bg/bullet4.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #AE337A;
font-weight: bold;
background-position: 0px 0px;
padding-left: 35px;
margin-left: 10px;
padding-top: 0px;
line-height: 30px;
}
.bullet5 {
background-image: url(../box-bg/bullet5.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #003399;
font-weight: bold;
background-position: 0px 11px;
padding-left: 15px;
margin-left: 10px;
line-height: 10px;
}
.heading-sub5 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #333399;
font-weight: bold;
margin-top: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
I'm trying to make a 2 column layout, using multiple divs, but no wrapper divs. I cannot use wrappers around either column. This works fine in IE7, but in FireFox the fisrt right column element isn't top aligned; it starts on the same line as the last left column element. Does anyone have any ideas? Thanks! .left { float:left; clear:left; margin-left:25px; width:605px; text-align:left; } .right { float:right; clear:right; margin-right:25px; width:285px; } <div id="one" class="left">left</div> <div id="two" class="left">left</div> <div id="three" class="right">right</div> <div id="four" class="right">right</div> <div id="five" class="right">right</div> my goal is this: left___right left___right ______right 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/ My site has three columns. left-middle-right The middle column in IE is right underneath the header as it should be. On firefox the middle coumn is as far below the header as the height of the right column. I have tried everything but i cant get it to look right in both browsers. It is all done with floated divs and doesn't use any tables at all. Please can someone help me! www.datahq-online.co.uk Thank you! 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? Well, I'm redesigning my site because the current php management system was thrown together in a hurry just to get it up there. Now I've got time to redo it and I want to do it right. It's a webcomic site. Currently, the site has an XML layout that serves XHTML after a serverside transformation. What I want to do is lay the site out now so I can define my xsl. The basic "gist" of the situation is, i want it to be as accessible as possible(even though blind people may not be able to see the images, they deserve to surf my website.). With that, I want my content to show up before my link area, so they can easily get to the content without listening to a long list of links first. So what I've done in firefox was repositioned the div tags that held the content above the div section that held the link boxes. That's fine and dandy, where's my point? I still want the linkboxes to appear on the lefthand side of the page and the content on the right. In firefox, I used float:right;margin-right:5%; for the content and float:left on the link boxes. It works fine in firefox. The boxes appear on the left and content on the right. However, in IE the content appears on the right, but the link boxes appear on the left of the next line. Here is relelvant code: html Code: Original - html Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>AdrienComix</title> <style type="text/css"> #body{ margin:0; } .header{ margin-bottom:10px; width:100%; height:15%; color:#000000; background-color:#00BBFF; background:url(http://www.adriencomix.com/res/head.jpg); border:1px dashed; text-align:center; font-size:20pt; } .box{ border:1px dashed; margin-bottom:30px; margin-left:2px; padding-left:5px; width:100%; background-color:#00BBFF; color:#000000; } .left{ width:15%; height:85%; float:left; } .content{ width:74.6%; height:100%; margin-left:5%; float:right; padding-right:5%; } .comic{ text-align:center; padding-top:15px; padding-bottom:15px; } .emp{ text-align:center; padding-top:20px; font-size:150%; font-weight:bold; } </style> </head> <body id="body"> <div class="header"><p>AdrienComix</p></div> <div class="content"> <div class="emp">Happy New Year!</div> <div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div> <div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div> <div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div> </div> <div class="left"> <div class="box"> <center><h3>Links</h3></center><br/> <a href="http://www.sluggy.com">Sluggy Freelance</a><br/> <a href="http://www.nuklearpower.com">8-bit Theater</a><br/> <a href="http://www.slackware.com">Slackware Linux</a><br/> <a href="http://www.gnu.org">GNU</a><br/> <a href="http://www.kernel.org">Linux Kernel</a><br/> <a href="http://www.google.com">Google</a> </div> <div class="box"> <center><h3>Archive</h3></center><br/> <a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/> <a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/> <a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/> <a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/> <a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/> <a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/> <a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/> <a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/> <a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/> <a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/> </div> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AdrienComix</title>
<style type="text/css">
#body{
margin:0;
}
.header{
margin-bottom:10px;
width:100%;
height:15%;
color:#000000;
background-color:#00BBFF;
background:url(http://www.adriencomix.com/res/head.jpg);
border:1px dashed;
text-align:center;
font-size:20pt;
}
.box{
border:1px dashed;
margin-bottom:30px;
margin-left:2px;
padding-left:5px;
width:100%;
background-color:#00BBFF;
color:#000000;
}
.left{
width:15%;
height:85%;
float:left;
}
.content{
width:74.6%;
height:100%;
margin-left:5%;
float:right;
padding-right:5%;
}
.comic{
text-align:center;
padding-top:15px;
padding-bottom:15px;
}
.emp{
text-align:center;
padding-top:20px;
font-size:150%;
font-weight:bold;
}
</style>
</head>
<body id="body">
<div class="header"><p>AdrienComix</p></div>
<div class="content">
<div class="emp">Happy New Year!</div>
<div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div>
<div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div>
<div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div>
</div>
<div class="left">
<div class="box">
<center><h3>Links</h3></center><br/>
<a href="http://www.sluggy.com">Sluggy Freelance</a><br/>
<a href="http://www.nuklearpower.com">8-bit Theater</a><br/>
<a href="http://www.slackware.com">Slackware Linux</a><br/>
<a href="http://www.gnu.org">GNU</a><br/>
<a href="http://www.kernel.org">Linux Kernel</a><br/>
<a href="http://www.google.com">Google</a>
</div>
<div class="box">
<center><h3>Archive</h3></center><br/>
<a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/>
</div>
</div>
</body>
</html>
Is there any way that I can make it appear on the same line in IE without breaking the layout in firefox and keeping the page accessible? Hi COuld someone take a look at http://www.sussexfind.co.uk/test/ if you view it in Firefox the layout breaks and I don't know why. If someone could explain why i would be very grateful as I need to get this done soon!! Thanks I'm a pretty new CSS coder, and primarily use Firefox so I designed my website based on that browser, and now when I try opening it in IE it looks completely wrong and different. Does it have to do with my margins? I have no idea--if someone can just point me in the right direction to even figure out where the problem lies (and even better if you know how to fix it!) that would be fabulous. The website is www.yarniapdx.com and it looks exactly how I want it to in Firefox, but in IE it's a mess! Thank you so much in advance, -lindsey Here's my problem. I was stupid enough to do my layout for a page I'm making in Firefox, but didn't look at IE until I was done. IE is rendering the whole thing completely off. I was wondering if anyone might be able to help me reconcile the two layouts? Here's the CSS: Code: body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #ccc;
background-color: #3C3C3C;
text-align: center;
}
img {
border: 0;
}
abbr, acronym, .help {
border-bottom: 1px dotted #333;
cursor: help;
}
#container {
padding-top: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background: url(images/background.png) repeat-y;
border: 0px;
text-align: left;
width: 685px;
}
#menu {
float: right;
z-index: 9;
margin-right: -44px;
}
#content {
border: 10px solid #5B5B5B;
background: #FFF;
width: 661px;
font-size: 12px;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 2px;
font-family: tahoma, verdana, san-serif;
}
.content-right {
float: right;
width: 70%;
}
.content-left {
width: 32%;
}
h1#primary {
position:relative;
z-index: 10;
background: url(images/header-1.png) top left no-repeat;
width: 685px;
height: 35px;
margin-top: 26px;
margin-bottom: 0px;
margin-left: 20px;
text-indent: -9999px;
}
h2#homeprofile {
background: url(images/homeprofile.png) top left no-repeat;
width: 105px;
height: 20px;
margin-top: 15px;
margin-bottom: 5px;
margin-left: 14px;
text-indent: -9999px;
}
h2#featured {
background: url(images/featured.png) top left no-repeat;
width: 167px;
height: 21px;
margin-top: 5px;
margin-bottom: 10px;
margin-left: 14px;
text-indent: -9999px;
}
h2#realtor {
background: url(images/realtor.png) top left no-repeat;
width: 161px;
height: 20px;
margin-top: 35px;
margin-bottom: 10px;
margin-left: 14px;
text-indent: -9999px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
#content ul li {
padding-left: 20px;
margin-left: 25px;
margin-bottom: 3px;
margin-top: 5px;
background-image: url(images/bullet.gif);
background-repeat: no-repeat;
background-position: center left;
font-size: 12px;
color: #7D8381;
}
.content-intro {
font-size: 12px;
color: red;
font-weight: bold;
}
#featured-pic {
margin-left: 15px;
margin-right: 10px;
}
p.homeprofile-txt, p.realtor-txt, p.featured-txt {
font-size: 12px;
color: #7D8381;
margin-top: 5px;
margin-left: 15px;
margin-right: 10px;
}
a:link, a:visited {
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}
a:hover, a:active {
color: #343F51;
text-decoration: none;
border-bottom: 1px dotted black;
}
img.featured-pic, img.realtor-pic {
margin-left: 14px;
}
Here's the HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Our Home</title>
<style type="text/css" media="all">@import url("style.css");</style>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv= "pragma" content="no-cache" />
<meta name="robots" content="all" />
</head>
<body>
<div id="container">
<div id="menu"><img src="images/imagemap.gif"></div>
<h1 id="primary">Country Living</h1>
<div id="content">
<div class="content-right">
<h2 id="featured">Feature Presentation</h2>
<img id="featured-pic" src="images/featured-thumb.png" align="left" width="124px" height="92px" />
<p class="featured-txt"><span class="content-intro">Please browse our image gallery</span>, where you will find a complete tour of the house, including the kitchen, bedrooms, dining room, and more! Upon loading the gallery, you can choose a new picture simply by clicking on it. Move to the next page by clicking the arrows. <a href="/gallery/public_html/">see the gallery</a></p>
<h2 id="realtor">Realtor Information</h2>
<img id="featured-pic" src="images/realtor-thumb.png" align="left" width="124px" height="92px" />
<p class="realtor-txt"><span class="content-intro">Call our realtor</span> to set up a showing of our home! Full information is provided to contact *******************. <a href="#">see the info</a></p>
</div>
<div class="content-left">
<h2 id="homeprofile">Home Profile</h2>
<p class="homeprofile-txt"><span class="content-intro">The home at ******************* Road</span> sits on three acres of well-manicured lawn. Just made for those beautiful ****** evenings, you'll find both the front porch and back patio providing beautiful vistas for the eye, best enjoyed with a cool glass of iced tea.</p>
<p class="homeprofile-txt">Completely remodeled within the last year, this house is ready for any family, large or small, to call it home. Here are some of the vital statistics you'll be interested in:</p>
<ul>
<li>Bedrooms: 4</li>
<li>Bathroom: 3.5</li>
<li>Apprx. SqFt: 4824</li>
<li><abbr title="List Price per Square Foot">Lp. SqFt</abbr>: 90.17</li>
<li>Acreage: 3 acres</li>
<li>City: *********</li>
<li>County: *********</li>
<li>Stories: One story</li>
<li>Style: Traditional</li>
<li>
</ul>
<p class="homeprofile-txt">Please look around our site for more information on this prime home. You'll find that we have a gallery complete with pictures from every area of the house, as well as information on our realtor, and directions on how to get the house if you want to get a better idea of the location.</p>
</div>
</div>
</div>
</body>
</html>
Here's a picture of what the problem looks like in IE. Here's a picture of what the problem looks like 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. I have been pulling my hair out on this one because for the life of me I cannot make it work. Here is my page: www.nova-dataonline.com Notice that in IE, the "Featured Products" section displays nicely and when you mouseover "Cisco Systems" the filler text displays well within the grey box. The entire "Featured Products" section apart from the manufacturer logos, is one image and the mouseover text is padded to appear correctly within the grey box which is part of the image. Now notice in firefox that the entire layout breaks. The div displays much larger than I intended and the padded text does not display correctly. I have found that if I remove the padding from the div containing the background image, the div displays fine, but this leaves me without a way to style the content of the div in the correct place. So it appears that firefox is expanding the div based on the padding here is the relevant markup: PHP Code: <div class="featured" id="feat_1" onmouseover="toggleDiv('feat_1',1)" onmouseout="toggleDiv('feat_1',0)"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. </div> and css: Code:
.featured{
visibility:visible;
width:410px;
height:350px;
position:absolute;
top:250px;
left:340px;
border:1px solid #999999;
border-left:none;
background-repeat:no-repeat;
background-position:center;
background-image:url(images/message/feat.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-style:normal;
padding:102px 27px 29px 29px;
}
#feat_1{visibility:hidden;}
and javascript (if it is even relevant to the problem): PHP Code: <script language="javascript" type="text/javascript"> <!-- function toggleDiv(id,flag) { if (flag == "1") { if (document.layers) document.layers[''+id+''].visibility = "show" else if (document.all) document.all[''+id+''].style.visibility = "visible" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" } if (flag == "0") { if (document.layers) document.layers[''+id+''].visibility = "hide" else if (document.all) document.all[''+id+''].style.visibility = "hidden" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" } } --> </script> any idea? 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? 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 Hello, I have this layout in CSS for my website www.websitemeester.nl , in Firefox it looks perfect, but IE ****s the whole thing up. Who knows why that is? How can I make it a lil better for IE? Thx, Jules #top { margin: 0px 0px 0px 0px; padding: 10px; border-bottom: 0px solid black; background: #efefef; height: 100px; voice-family: "\"}\""; voice-family:inherit; height: 40px; } html>body #top { height: 40px; } #left { position: absolute; top: 60px; left: 0px; margin: 0px; padding: 10px; border-right: 0px dotted black; border-bottom: 5px solid yellow; background-color: orange; width: 170px; voice-family: "\"}\""; voice-family:inherit; width: 150px; } html>body #left { width: 150px; } #middle { padding: 10px; border-top: 5px solid orange; background: white; margin: 0px 150px 0px 170px; } #right { position: absolute; top: 60px; right: 0px; margin: 0px; padding: 10px; border-left: 5px solid orange; border-bottom: 15px solid orange; background: #efefef; width: 150px; voice-family: "\"}\""; voice-family:inherit; width: 130px; } html>body #right { width: 130px; } Ok I have been trying to read and search and fiddle - but im getting to my wits end here. Trying a 2 column layout from scratch and in IE it views fine but firefox is not so fine. www.chroma-zone.net css: www.chroma-zone.net/new.css Any idea's? -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. I have a basic layout as follows: Code:
<div id="wrapper">
<div id="header">
<!--#include virtual="/siteadmin/includes/inc_header.asp" -->
</div>
<!-- Begin Left Column - Menu -->
<div id="leftcolumn">
<!--#include virtual="/siteadmin/includes/inc_admin_menu.asp" -->
</div>
<!-- End Left Column - Menu -->
<!-- Begin Right Column - Content -->
<div id="rightcolumn" align="left">
<!--#include virtual="/siteadmin/includes/inc_menu_page.asp" -->
</div>
<!-- End Right Column - Content -->
<!-- Begin Footer -->
<div id="footer">
<!--#include virtual="/siteadmin/includes/inc_footer.asp" -->
</div>
<!-- End Footer -->
</div>
Which uses the following css Code:
body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
font-family: "trebuchet ms", Arial, Helvetica, sans-serif;
background-color:#FFFFFF;
}
#wrapper {
margin: 0px;
width: 100%;
padding: 0px;
}
#header {
color: #333;
width: 100%;
float: left;
border: 0px solid #ccc;
height: 100px;
background-image: url('/media/images/headerBackground.gif');
}
#leftcolumn {
color: #333;
border: 0px solid #ccc;
background: White;
padding: 10px;
width: 195px;
float: left;
padding-left: 10px;
padding-right: 10px;
}
#rightcolumn {
float: left;
color: #333;
border: 0px solid #ccc;
background: White;
padding: 10px;
height: 100%;
display: inline;
padding-left: 10px;
padding-right: 20px;
}
#footer {
width: 100%;
height:27px;
clear: both;
color: #333;
border: 0px solid #ccc;
background-image: url('/media/images/footer_bg.jpg');
background-repeat:repeat-x;
}
Anyway the problem is, IE will display as it needs to while firefox will put the right colum down below the left column, header and footer are in the correct spot. Am I doing something wrong here? (very new to layout css) |
|||||||