|
CSS - Positioning/margin Not Showing Correctly On All Computers
Index.php code:
Code: <div id="Wrapper">
<div id="Content">
<div id="Header">
<div id="Logo"></div>
<div id="Title"></div>
<div id="Navigation">
<ul>
<li><a href="(url blocked)">Home</a></li>
<li><a href="specials.html">Specials</a></li>
<li><a href="">Inventory</a>
<ul>
<li><a href="inventory-weapons.html">Weapons</a></li>
<li><a href="inventory-accessories.html">Accessories</a></li>
<li><a href="inventory-ammunition.html">Ammunition</a></li>
</ul>
</li>
<li><a href="manufacturers-links.html">Manufacturers</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="contact-us.html">Contact</a></li>
</ul>
</div>
</div>
And my css file: Code: #Title {
width: 425px;
height: 75px;
background: url(../images/Title.png) no-repeat;
padding: 0px;
margin: 0px;
position: absolute;
top: 3%;
left: 35%;
}
Code: #Welcome_Letter {
margin-right: 18%;
margin-left: 3%;
position: absolute;
top: 190px;
}
Code: #Navigation {
position: absolute;
top: 15%;
left: 30%;
width: 580px;
}
The problem is the absolute positioning of the Title and Menu, and the margins of the first paragraph. On 4 out of the 5 computers I've tested it on, its shown properly (In Firefox, yes I know I need to fix the paragraph for IE.) But on the one computer, even in Firefox, the Title, Menu, and margins of the first paragraph are way off, and I can't figure out why. I've tried doing it in px, em, and currently its in percent, which has been the closest so far. But why is it not showing up perfect? This is what its supposed to look like: i27.tinypic.com/9ihfza.jpg This is what it shows up as on the 1 computer: i28.tinypic.com/swwu49.jpg Help please! Thank you Edit: Fixed url's Similar TutorialsI am trying to do this: PHP Code: <div ID="greenpaid" style="position: absolute; font-size: 12px; left: 803px; top: 160px; background-color: #339933; margin: 0px; padding: 5px; color: #fff; visibility: hidden"><b>PAID</b></div> <div ID="redunpaid" style="position: absolute; font-size: 12px; left: 803px; top: 160px; background-color: #cc0000; margin: 0px; padding: 5px; color: #fff; visibility: hidden"><b>UNPAID</b></div> Both divs are set visibility: hidden and a javascript then makes one visible depending on a value from a database. Further down the page I have a check box which toggles between these 2 divs, making one visible and the other hidden, and vice-versa. Now, when I view this page on my computer it looks fine (in both IE 6.0 and Firefox), but when a client looks at the page in IE 6.0 she says the javascript toggling all works fine but the divs are on the top left of site page, overlapping some other text on the web page. Have I written any CSS incorrectly in either of those divs that might cause this? Any idea how I might make this work. I mean, I've heard of bugs in various browsers and browser versions, but in the same browser on different computers (both PC's)? That's hard to work around. Hello, I am having some trouble with the position of 2 DIV's. They look fine on my computer but aren't in the same position on IE and other peoples computers. The following is how it looks on FireFox on my computer and how it SHOULD look for everyone: http://i53.tinypic.com/2h3bi8z.jpg This is how it looks on IE9 (Yes I am aware the menu isn't right either but i'll sort that out later): http://i55.tinypic.com/262sb5h.png The code for the 2 DIV's (I can post whole page CSS code if required): Code:
#shoppingCart{
background-image:url('images/shopping_cart_banner.jpg');
background-color:#000000;
background-repeat: no-repeat;
height:80px;
width:200px;
color:white;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
position:absolute;
top:300px;
left:915px;
}
#countdown{
background-image:url('images/countdown_banner.jpg');
background-color:#000000;
background-repeat: no-repeat;
height:80px;
width:200px;
color:white;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
position:absolute;
top:420px;
left:915px;
}
The HTML code for the page: 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>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Home - Dine in</title>
<meta name="description" content="Homepage for Dine in" />
<meta name ="keywords" content="Dine, food" />
<link rel="stylesheet" type="text/css" href="divstyles.css" />
<link rel="stylesheet" type="text/css" href="formatstyles.css" />
<link rel="stylesheet" type="text/css" media="all" href="menu_style.css" />
</head>
<body class="body">
<div id="page_section">
<div id= "banner">
<img src="images/Banner.jpg" alt="The Dine In Banner" height="100%" width="100%" />
</div>
<div>
<ul id='menu'>
<li class="button"><a class='current' href='index.html' >Home</a></li>
<li class="button"><a href='aboutus.html' >About Us</a></li>
<li class="button"><a href='http://' >Menu</a></li>
<li class="button"><a href='http://' >Gallery</a></li>
<li class="button"><a href='http://' >Reviews</a></li>
<li class="button"><a href='booking.html' >Bookings</a></li>
<li class="button"><a href='http://' >Upcoming Events</a></li>
<li class="button"><a href='http://' >Contact Us</a></li>
<li class="button"><a href='http://' >Links</a></li>
</ul>
</div>
<div id="content">
<center><h1>The Dine In; A Cuisine like no other</h1></center>
<center><h4><u>Established August 2011</u></h4></center>
<center><img src="images/rest.jpg" alt="setting" title="setting" /></center>
<h2 class="margin">Whether alone, with family or with friends our purpose is to give you the <b>best</b> eating experience ever.</h2>
<p class="margin">Located on Bourke St, in the heart of Melbourne's CBD, TDN is a newly opened restaraunt with a World Class Cusisine and the finest dishes.
It combines relaxeded, glamourous atmosphere with exceptional hospitality.<br />
Our specialised Cheffs and Staff are trained to meet the requirements of our customers. At TDN it's our customers <i>needs</i> and <i>wants</i> that come first.
<center>We are open<u>7 days</u> a week and invite you during the following hours. </center>
<center><h3>Trading Hours:</h3></center>
<center>Mon 9:00am - 9:00pm</center>
<center>Tue 9:00am - 9:00pm</center>
<center>Wed 9:00am - 9:00pm</center>
<center>Thu 4:00pm - 10:30pm</center>
<center>Fri 4:00pm - 10:30pm</center>
<center>Sat 4:00pm - 10:30pm</center>
<center>Sun 11:00am - 5:30pm</center>
<center><h3>Thank you for visiting our Web Site, please continue browsing through what we have to offer to our customers</h3></center>
<div id="shoppingCart"></br></br>
<center>Your cart is currently empty.</center>
</div>
<div id="countdown"><br/><br/>
<script type="text/javascript" src="countdown.js"></script>
</div>
</div>
<div id= "footer">
<b>Disclaimer</b><br/>
This website is a student project that is intended to be used only for academic purposes. This page was created by Taner Serbest</p>
</div>
</div>
</body>
</html>
The URL for the site (if it helps or is needed): http://freddo.bf.rmit.edu.au/~s3286104/TheDineIn/index.html Any help is appreciated! I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? devwebsites.com/sitedevs/ Anyway, FF3 and Safari show up fine. I used conditional comments to get rid of what Opera is showing, and to make it look like FF3. However since Opera is displaying this behavior I guess I need to figure out what the actual problem is. Any input on it? I am not literate in CSS at all. I can change numbers and so forth, but to write my own css I can not do. I am confused on why this page is showing incorrectly on some versions and correctly on others. I am not asking for the solution, just a suggestion on what I should be looking for. I want to learn this so I am not spending more time correcting things than I am now! My pc shows it displayed correctly, however, my client's doesnt. Her menu on the left is displayed well below everything else on the page. I have used this template from one of the free template sites and modified to fit our needs. I hope I can contribute in other fields of this group some way.. and appreciate any assistance with this I can get! Toni CSS BELOW: Code: /* Globals */ html,body{margin:0;padding:0} body{font: 76% arial,sans-serif;text-align:center; background-color: #ccc; background-image:url(images/plaidbg.gif)} a{ color: #981793;padding:10px;} /* Primary Divs */ div#header { height: 4em; color:#000; border-bottom: 2px solid #A9A9A9;} div#wrapper { margin-top: 5px; } div#container{text-align:left} div#content p{line-height:1.4} div#navigation{background:#FFFFAC} div#extra{background:#FFFFAC} div#footer{background: #FFFFAC;color: #000; border-top: 2px solid #A9A9A9; } div#footer p{margin:0;padding:5px 10px} div#container{width:700px;margin:0 auto; } div#bgwrap { background: #FFFFAC url(images/brushbg.gif); width: 800px; margin: 0 auto;} div#content{float:right;width:545px} div#calendar{float:inherit;width:inherit} div#navigation{float:left;width:150px} div#extra{float:left;clear:left;width:150px;} div#footer{clear:both;width:100%} /* TABLES */ table {border: 2px solid #FFFF84; border-collapse:collapse; width:90%; margin-left: 3ex; } td {padding:3px; border: 1px solid #ccc; color:#000;} th {text-align:left;border: 1px solid #fff} thead th {color:#000; font-size:1.5em; background-color: #990 ; padding: 10px 6px} tbody th {color:#000; font-size:1.15em; background-color: #FFFF84 ; padding: 6px} tbody th.sub {font-size: .90em; color:#fff; background-color: #336; padding: 6px} /* TEXT STYLES */ div#content a:link, div#content a:visited { padding:0; color:#600; text-decoration:none; border-bottom: 1px solid #FFFF84; } div#content a:hover {background-color: #990; color:#fff; } div#content h1 { font-size: 2em; color:#000; margin-top: 0; text-transform:uppercase; letter-spacing: 1px;} div#content h2 { font-size: 2em; color: #000; line-height: 1.3em; letter-spacing: -1px;} div#content h3 { font-size: 1.5em; color: #990;} div#content h4 { font-size: 1.25em; color: #966;} div#content h5 {font-size: 1em; font-weight:bold;} div#content h1,h2,h3,h4,h5 {padding:0 5px 0px;} acronym {border-bottom: 1px dotted #966; cursor:help; } form,submit { padding:0; margin:0; } /* removes extraneous padding around the form */ code { border: 1px dotted #FFFF84; background-color: #990; color:#fff; margin-left: 3ex;} blockquote { border: 1px solid #FFFF84; background-color: #990; color:#fff; margin: 3ex; font-style:italic;} /* Horizontal Navigation Menu */ #header ul { margin:0; text-align: right; padding-top: 1.6em; padding-bottom:0;} #header ul li { list-style-type:none; display:inline;} #header ul li a:link, #header ul li a:visited { display:inline; padding-top: 3em; text-decoration:none; color:gray; border-left: 2px solid gray;} #header ul li a:hover { border-bottom: 1px solid gray; background: #FFFFAC url(images/arrow2.gif) center center no-repeat;} .skiplink a:link, .skiplink a:visited { visibility: hidden;} /* Vertical Navigation Menu */ #navigation { margin-bottom: 15px; } #navigation ul { list-style-type:none; margin:0; padding:0; } #navigation ul li {line-height: 4px; border-bottom: 1px solid gray;} #navigation ul li a:link,#navigation ul li a:visited { text-decoration:none; color:#000; text-transform:uppercase; display:block; } #navigation ul li a:hover { background: #FFFFAC url(images/arrow.gif) left center no-repeat; padding-left: 25px; font-weight:bold; } #navigation p{margin:0 10px 10px} /* Logobox */ #logobox {background-image:url(images/plaidbg.gif); width: 150px; border: 1px solid #FFFFAC; text-align:center;} #logobox h1 { border-top: 1px solid #600; } #logobox h1, #logobox h2 { background-color: #A9A9A9; color: #FFFF84; margin: 5px; margin-bottom: 0; padding: 8px; font-size: 1.3em; text-transform: uppercase; border-right: 1px solid #600; border-left: 1px solid #600;} #logobox h2 { margin-top: 0; margin-bottom: 5px; font-size: 1em; border-bottom: 1px solid #600;} /* Main pic area above content */ div#mainpicbox { height: 400px; border: 1px solid #A9A9A9; margin-left: 10px; padding: 10px; margin-bottom: 15px;} div#mainpic { height: 400px; background: url(images/blockdesign.gif) top center repeat-y; color:white; } div#mainpic h2 { color:#fff; font-size: 2.75em; margin-top:0; padding-top: 2em; padding-left: 20px; margin-bottom:0; } div#mainpic h3 { padding-left: 20px; color:#330;} div#mainpic p, div#mainpic a:link, div#mainpic a:visited { display:inline; margin:0; color:#fff; margin-left: 10px;font-weight:bold; font-size: 1.2em; text-decoration:none; } div#mainpic a:hover {color:#600; background-color:inherit; } /* Extra section */ .stripnav { background-color: #A9A9A9; width: 130px; border: 1px solid #A9A9A9; text-align:center;} div#extra p {margin-left: 0; } div#extra h2 { background-color: #A9A9A9; color: #FFFF84; margin-bottom: 0; padding: 8px; font-size: 1em; text-transform: uppercase; border: 1px #000;} div#extra p a:link, div#extra p a:visited { padding:0; color: #600; font-weight:bold; padding-bottom: 1px; text-decoration:none;} div#extra p a:hover { text-decoration:underline;} /* Photo Gallery Area */ div#gallery { border-top: 2px solid #A9A9A9; padding-top: 15px;} div#gallery img {width: 50px; height: 50px; padding: 2px; border:1px solid #A9A9A9;} div#gallery ul { list-style-type:none; margin:0; padding:0;} div#gallery ul li {display:inline;} div#gallery ul li a:link, div#gallery ul li a:visited {display:inline; border-bottom:0;} div#gallery ul li a:hover {background-color:inherit;} /* Footer Area */ div#footer ul { list-style-type:none; margin:0; padding:0; padding-top: 2px; text-align:right; font-size: .8em; } div#footer ul li { list-style-type:none; display:inline; border-left: 1px solid gray;} div#footer ul li a:link,#footer ul li a:visited { display:inline; text-decoration:none; color:#000; text-transform:uppercase;} div#footer ul li a:hover {text-decoration:underline;} div#footer p {text-align:center; margin-top: 5px;} /* Content Area */ div#content img { border: 1px solid #A9A9A9; padding: 2px; margin: 3px; margin-left: none; } div#content p {padding-left: 5px;} /* Bonus Styles */ p.rightsidelink { text-align:right;} .rightsidelink a:link, .rightsidelink a:visited { padding:0; color:#600; font-weight:bold; text-decoration:none;} .rightsidelink a:hover {text-decoration:underline;} .entrytext { margin-top: 0; font-size:larger; font-weight:bold;} .bright { font-size: 1.5em; color:#600; text-transform:uppercase;}
Then page text/layout he Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="bgwrap">
<div id="container">
<div id="header">
<ul>
<li class="skiplink"><a href="#content">Skip to Content</a></li>
<li class="skiplink"><a href="#navigation">Skip to Navigation</a></li>
<li><a href="/shop">Shopping</a></li>
<li><a href="http://members.ebay.com/ws/eBayISAPI.dll?ViewUserPage&userid=" target="_blank">Ebay</a></li>
<li><a href="contact_us.shtml">Contact Us </a></li>
<li><a href="index.shtml">Main Page </a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">
<div id="mainpicbox">
<div id="mainpic">
<h2> </h2>
</div>
</div>
<h1 align="center"> Welcome to </h1>
<h1 align="center"> </h1>
<p align="center">A painting studio featuring artwork for sale </p>
<p align="center">and<br />
<br />
offering instruction for those who would like to create their own </p>
<p align="center">landscape or floral paintings in oils.</p>
<p align="center"> </p>
<p align="center">If you would like to be notified of new classes or items for sale, </p>
<p align="center">please be sure to join our mailing list.</p>
<p align="center">No purchase is necessary to register.<br />
</p>
<p class="rightsidelink"> </p>
<div id="gallery">
<p class="entrytext"> </p>
</div>
</div>
</div>
<div id="logobox">
<h1> </h1>
<h2>Explore your creativity</h2>
</div>
<p><!--#include file="menu.html" -->
</p>
</div>
<div id="footer">
<ul>
<li><a href="index.shtml">Main Page</a></li>
<li><a href="about.shtml">About Us</a></li>
<li><a href="/shop">Shopping</a></li>
<li><a href="/shop/index.php?main_page=index&cPath=7">Classes</a></li>
<li><a href="contact_us.shtml">Contacts</a></li>
</ul>
<p>Copyright 2007 - | Site designed and hosted by<a href="http://www..com" target="_blank"></a> </p>
</div>
</div>
</div>
</body>
</html>
Then Menu.html file he Code: <link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<div id="navigation">
<ul>
<li><a href="index.shtml">Home</a></li>
<li><a href="about.shtml">About Us</a></li>
<li><a href="contact_us.shtml">Contact us </a></li>
<li><a href="calendar.shtml">Calendar</a></li>
<li><a href="classes.shtml">Classes</a></li>
<li><a href="events.shtml">Other Events </a></li>
</ul>
</div>
<div id="extra">
<h2 class="stripnav">Shopping</h2>
<p>Here we will show a single item from each category in your shopping area that will be linked to it.. </p>
<p><a href="#">Pattern Packets </a><br />
Photo goes here </p>
<p><a href="#">Glass</a><br />
Photo goes here </p>
<p><a href="#">Paintings</a><br />
Photo goes here</p>
<p><a href="#">Wood</a><br />
Photo goes here </p>
<p><a href="#">Other</a><br />
Photo goes here </p>
<p><a href="#">Supplies</a><br />
Photo goes here </p>
</div>
The following code works in most browsers but not so well in IE, there seems to be an extra block of css shading in the last box in the row. this is what we really want removed. has anyone got any ideas how the issue IE can be fixed. thanks in advance for your help. Code:
<style type="text/css">
<!--
.menucontainer { background:#799BD9; margin:0 5px;}
.menurtop1, .menurbottom1{ display:block; background:#125892; }
.menurtop1 *, .menurbottom1 *{ display: block; height: 1px; overflow: hidden; background:#799BD9; }
.r1{ margin: 0 5px}
.r2{ margin: 0 3px}
.r3{ margin: 0 2px}
.r4{ margin: 0 1px; height: 2px }
a.one:link { color: #000; }
a.one:visited { color: #000; }
a.one:hover { color: #fff; }
a.one:active { color: #000; }
a.one { text-decoration: none; }
h1 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 0; padding: 5; }
h2 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 5; padding: 5; }
-->
</style>
<style>
<!--
A {color:#000000; font-weight: normal;}
A:hover {color: #0066FF; font-weight: normal;}
-->
</style>
<body bgcolor="#003399">
<table width="100%" style="border-collapse:collapse;">
<tr>
<td width="0%" height="21">
<div class="menucontainer" align="center">
<b class="menurtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<table width="100%" style="border-collapse:collapse;" dwcopytype="CopyTableColumn">
<tr>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=a" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l1</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/members/index.php?ac=s" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l2</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/members/index.php" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l3</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=f" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l4</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=c" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l5</font></a> </div></td>
<td NOWRAP> <div align="center"><a class="bm" title="link me" href="http://<?=$siteurl;?>/?ac=b" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l6</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=s" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l7</font></a> </div></td>
</tr>
</table>
<b class="menurbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
</td>
<td width="5%" NOWRAP><div align="center"><font color="#FFFFFF" size="2" face="Tahoma">123456</font></div></td>
</tr>
</table>
hello all, my site is at waxmuseumplus dot ie css file is on the top level called layout.css I've put my site up and it works fine except that sometimes when you go to another page and comeback to the homepage the swf files don't position correctly. The real bizarre thing is that if you reload the page (maybe not on the first try but maybe the second try) it appears fine again. there are 6 swf files at the bottom right corner of the blue boxes across the page. They create the page curl animation at the bottom right. 9 out of 10 times they all load in position correctly but sometimes they don't. They appear further down the page. I think the fix is in the "a" link which i've wrapped around the div pagecurl and div textabove. I had this original set to 100% height. But i have now given it a 150px height. This doesn't fix anything though? The problem is that it is intermittent. Of course it looks fine my FF3 and when i test on others but when the client checks she sees errors. Please help I'm tearing my hair out and the site is already live! I have a button that when you click it a div appears. This div is absolutely positioned. In Firefox the margin of the absolute positioned div is from the top of the UL element. In IE6/7 its from the bottom of the UL element... Help? CSS: Code: #sitenav { border-bottom: 1px solid #d6d6d4; border-left: 1px solid #d6d6d4; border-right: 1px solid #d6d6d4; width: 958px; background-repeat:no-repeat; margin-bottom: 2px; overflow: auto;}
#sitenav ul { margin: 0; padding: 0; margin-left: 40px; list-style: none; }
#sitenav ul li { float: left; margin: 0; width: 100px; padding: 0px 10px; font-size: 14px; font-weight: bold; text-align: center; padding-top: 6px; }
#sitenav .active-top { background-image: url(../images/tabs/topNavTab.jpg); height: 22px; }
#sitenav #nav-products { clear: both; position: absolute; margin-top: 30px; margin-left: 40px; width: 450px; height: 225px; background-color: #fff; border: 1px solid #333; }
HTML: Code: <div id="sitenav">
<ul>
<li class="active-top">Products</li>
<li>Solutions</li>
<li>Partnerships</li>
<li>Technology</li>
</ul>
<div id="nav-products"></div>
</div> <!-- END SITENAV -->
Example: http://www.nwkeeley.com/test2.html FYI: this line: #sitenav #nav-products the margin-top: 30px is great on FF, but it has to be margin-top: 2px to look good in IE Thanks for any help! Alright, for some reason, my site works fine in IE, but displays wierdly in Firefox and Opera. http://www.gamingfanboy.com Is there anything in my code that could be causing the display problems in Firefox/Opera? Edit: Just in case you were wondering, no, those aren't the final colors. I was just looking for some contrast. Well.. I just remembered I am a member here... I usually figure out my problems.. but this one is just annoying me... I haven't really decided on colors or anything.. but I just wanted the basic layout with content on my my site... but I get 1 IE problem.... check it out.. http://centralfloridacomputerrepair.com/test.php the image all the way to the right works fine in FF... but in IE it's below where it should be, and messes up the whole page. the css is here http://centralfloridacomputerrepair.com/style.css (what you are looking at is div#sidetext) and the css/xhtml validates http://validator.w3.org/check?verbo...ir.com/test.php http://jigsaw.w3.org/css-validator/...ir.com/test.php I just can't figure it out... I've tried using left: 735px; ... since it's positioned absolute from the top.. but left didnt work with IE either... it gets to the right place horizontally.. but not vertically... I tried margin-right with negative.. and it didn't work at all.. it just stayed left all the way. any ideas? edit: I've been here a whole year... and this is my first post. HA. Hello Everyone, First post here. I tried to research my issue within the forums first but there is just too much going on and I didn't find my exact scenario. I actually had this problem with another project and I tried to simplify everything for posting purposes. I came pretty close. however, with my initial problem IE was displaying the desired result and FF wasn't. In this situation neither are showing the desired result. The Prob: I have four divs and a body tag that I have used in CSS. My problem is that my content and sidebar boxes are showing up, but the container and menu divs, which the content and sidebar are nested within, aren't showing up. I have tried many different options with the positioning. Currently I am assigning absolute to the content and sidebar and relative to the container. I thought I had the correct understanding of relative and absolute positioning, but I am not getting the results I was hoping for. I want to see all four divs: menu, container, content, sidebar. They are all represented by a different color. Menu should fill the whole screen, container should be centered 974 px wide and the content and sidebar showing within the container. The code: Code: @charset "utf-8";
/* CSS Document */
#menu {
background-color: #693;
height: 100%;
width: 100%;
margin: 0px;
}
body {
margin: 0px;
}
#container {
width: 974px;
margin-right: auto;
margin-left: auto;
background-color: #C00;
position: relative;
}
#content {
background-color: #FF6;
width: 770px;
padding-right: 5px;
padding-left: 5px;
position: absolute;
left: 2px;
top: 2px;
}
#sidebar {
background-color: #009;
width: 180px;
padding-right: 5px;
padding-left: 5px;
position: absolute;
top: 2px;
right: 2px;
}
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<div id="container">
<div id="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed justo non leo lacinia aliquet. Suspendisse posuere lacus vel nunc euismod ac euismod elit consectetur. Proin magna elit, sagittis quis imperdiet luctus, venenatis quis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra feugiat tincidunt. Quisque quis justo aliquam purus congue feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nibh mauris, eleifend eu volutpat tempor, porttitor sit amet mi. Fusce accumsan, purus id luctus tincidunt, lectus est laoreet nisl, vitae sodales urna nibh at est. Suspendisse aliquam laoreet fringilla. Etiam ac arcu non elit ultrices luctus. Donec quis est nec mauris hendrerit sagittis. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed justo non leo lacinia aliquet. Suspendisse posuere lacus vel nunc euismod ac euismod elit consectetur. Proin magna elit, sagittis quis imperdiet luctus, venenatis quis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra feugiat tincidunt. Quisque quis justo aliquam purus congue feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nibh mauris, eleifend eu volutpat tempor, porttitor sit amet mi. Fusce accumsan, purus id luctus tincidunt, lectus est laoreet nisl, vitae sodales urna nibh at est. Suspendisse aliquam laoreet fringilla. Etiam ac arcu non elit ultrices luctus. Donec quis est nec mauris hendrerit sagittis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed justo non leo lacinia aliquet. Suspendisse posuere lacus vel nunc euismod ac euismod elit consectetur. Proin magna elit, sagittis quis imperdiet luctus, venenatis quis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra feugiat tincidunt. Quisque quis justo aliquam purus congue feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nibh mauris, eleifend eu volutpat tempor, porttitor sit amet mi. Fusce accumsan, purus id luctus tincidunt, lectus est laoreet nisl, vitae sodales urna nibh at est. Suspendisse aliquam laoreet fringilla. Etiam ac arcu non elit ultrices luctus. Donec quis est nec mauris hendrerit sagittis.</p>
</div><!--content-->
<div id="sidebar"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed justo non leo lacinia aliquet. Suspendisse posuere lacus vel nunc euismod ac euismod elit consectetur. Proin magna elit, sagittis quis imperdiet luctus, venenatis quis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra feugiat tincidunt. Quisque quis justo aliquam purus congue feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nibh mauris, eleifend eu volutpat tempor, porttitor sit amet mi. Fusce accumsan, purus id luctus tincidunt, lectus est laoreet nisl, vitae sodales urna nibh at est. Suspendisse aliquam laoreet fringilla. Etiam ac arcu non elit ultrices luctus. Donec quis est nec mauris hendrerit sagittis.</p>
</div><!--sidebar-->
</div><!--container-->
</div><!--menu-->
</body>
</html>
my site is www . becomeacheapskate . com / test Any and all help would be greatly appreciated. Thanks Ripeffect Background info: - I have validated the page and CSS, no problems there - Site is working properly in Firefox and IE, seems to be a margin issue in Safari -This margin issue is not the common Safari bug with a negative margin being applied to a floated element -I am using Safari in a windows environment, I do not have a Mac The problem: -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari? The website: http://www.lisa-noble.com/test/redo.html The HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Site Test</title>
<link rel="stylesheet" type="text/css" href="redo.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
</head>
<body>
<div id="top_filler">
</div>
<div id="left_filler">
</div>
<div id="right_filler">
</div>
<div id="top_left">
</div>
<div id="header">
</div>
<div id="top_right">
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Etc, etc, etc....</p>
</div>
<div id="bottom_filler">
</div>
<div id="bottom_left">
</div>
<div id="bottom_right">
</div>
</body>
</html>
The CSS Code: * {
margin: 0;
padding: 0;
}
body {
background: #fdd9e9;
}
div#top_filler {
background: url(images/bg_slice_sm.png) repeat-x;
width: 100%;
height: 164px;
position: fixed;
top: 0px;
z-index: 5;
}
div#left_filler {
background: url(images/left_slice_sm.png) repeat-y;
width: 174px;
height: 100%;
position:fixed;
left:0px;
z-index: 5;
}
div#right_filler {
background: url(images/right_slice_sm.png) repeat-y;
width: 161px;
height: 100%;
position:fixed;
right: 0px;
z-index:5;
}
div#bottom_filler {
background: url(images/bottom_slice_sm.png) repeat-x;
width: 100%;
height: 76px;
position: fixed;
bottom: 0px;
z-index: 5;
}
div#header {
position: fixed;
top: 0px;
left: 37%;
height: 125px;
width: 316px;
margin: 0 auto;
background: url(pink_logo2.png) no-repeat;
z-index: 25;
}
ul.NoBulletNoIndent {
list-style-type: none;
margin-left: 0px;
padding-left: 0px
}
div#top_left {
height: 314px;
width: 221px;
background: url(images/left_top_corner_sm.png) no-repeat;
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
}
div#bottom_left {
height: 175px;
width: 176px;
background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
left: 0px;
z-index: 5;
}
div#top_right{
height:174px;
width:174px;
background: url(images/right_top_corner_sm.png) top no-repeat;
position: fixed;
top:0px;
right: 0px;
z-index:5
}
div#bottom_right{
height: 602px;
width:198px;
background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 5
}
div#content {
margin: 40px 164px 0px 180px;
position: relative;
z-index: 1;
}
Heya guys, Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done. I've got this in style.css file: Code: /* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}
.topform {
position: absolute;
right: 5px;
top: 65px;
width: 300px;
font-size: 10px;
font-family: myriad, verdana, sans-serif;
text-align: right; }
input, form {
font-size: 11px;
font-family: myriad, verdana, sans-serif;
margin-bottom: 0px;
margin: 0px; }
/* End of SEARCH Bar */
Which refers to this part of my index.php page: Code: <!-- Top right SEARCH -->
<div class="topform">
<div class="lb_bl">
<div class="lb_br">
<div class="lb_tl">
<div class="lb_tr">
<form name="form" id="form" method="post" action=""><input name="search" type="text" />
<input name="search" type="button" value="SEARCH" /></form>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- End of top right SEARCH -->
But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com Thanks in advance to anyone who can help - Gaz Hi! Should I do this? p { margin-top: 2em; margin-bottom: 2em; } or this: p { margin-bottom: 2em; } Same question for headers (h1, h2, etc) Thanks! Hi all Take a look at this in Firefox and then in IE7: http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't. Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem. I did a search and found this link: http://www.positioniseverything.net/explorer/floatIndent.html Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way? Thanks a lot for help :-) Josh |
|||||||