|
CSS - Positioning/margin Problems Between Browsers...
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. Similar Tutorialsi was wondering if anybody could check my source and tell me what i'm doing wrong. the few parts i am positioning (the navigation & the iframe) are not positioned correctly on screen on Mac browsers. any help would be greatly appreciated. thanks! Code: Original - Code #Nav { position : absolute; left : 483px; top : 230px; } #Frame { position : absolute; left : 483px; top : 290px; }
#Nav {
position : absolute;
left : 483px;
top : 230px;
}
#Frame {
position : absolute;
left : 483px;
top : 290px;
}
For some reason, I can't get this to look right in both Firefox and Explorer; I haven't even bothered trying this on Macs, Safari, etc.! The relevant HTML: Code: <div id="wrapper">
<div id="header"></div>
<div id="navbar">
<p>
<a id="selected" href="index.php#content">Home</a>
<a href="about.php#content">About</a>
<a href="screenings.php#content">Screenings</a>
<a href="trailer.php#content">Trailer</a>
<a href="gallery.php#content">Gallery</a>
<a href="comeplay.php#content">Come Play!</a>
</p>
</div>
<div id="main">
</div>
</div>
The relevant CSS:
#header
{
margin: 0 auto;
text-align: center;
width: 830px;
height: 534px;
background: #fff url(images/logo.jpg) top center no-repeat;
border: 0;
padding: 0;
margin-bottom: 0;
}
#navbar
{
background: url(images/horizontal_divider.jpg) #fff;
width: 830px;
height: 40px;
padding: 0;
margin: 0 auto;
margin-top: -10px;
vertical-align: bottom;
}
#navbar p
{
position: relative;
bottom: -18px;
left: 50px;
margin: 0;
padding: 0;
}
#navbar #selected
{
background: #FFF;
font-weight: bold;
border-width: 1px 1px 1px 1px;
border-top-color: #000;
border-right-color: #000;
border-left-color: #000;
border-bottom-color: #fff;
color: #000;
}
#navbar a
{
text-decoration: none;
color: #333366;
border: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-color: #666699;
border-right-color: #666699;
border-left-color: #666699;
border-bottom-color: #000;
margin: 0 -4px 0 0;
padding: 3px 6px 0 6px;
background: #CCF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
}
If you want to see the URL, please IM me (new users are not allowed to post them, it seems). For some reason, Firefox always outputs the navbar <p> one pixel lower than Explorer, which screws up the effect I'm going for. Also, for some reason, while Firefox does the borders just fine, Explorer doesn't render the border-top of the navbar when it's only 1 pixel wide (if I make it 2 pixels wide, only THEN will Explorer it [at 1 pixel wide, not 2]). Unfortunately, 2 pixels makes is look really ugly in Firefox. What's up with this? Any help would be much appreciated, as this has been driving me nuts! Gracias! Just when you think you have everything pixelperfect (even on IE6) IE7 drops by. In most browser the page works correctly, the colored blocks all have their roll-over. But something is different in IE7: it gets wrecked. Is it possible to have IE7 behave like IE6? That would be most convenient for me, but that's only a work around, not a solution. So a couple of similar pages: DO NOT QUOTE / PASTE PLEASE - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - http://www. insight-development.nl/matrix.html insight-development.nl/matrix-v2.html insight-development.nl/matrix-v3.html log in with test & test - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Please have a look with me: (in the xml/html files, the css files are the same) version2 is similar to the first, except I have only 1 column filled. version3 is similar to the first, except I have only 2 columns filled. version2 is similar to the first, except I have only 1 column filled. What you see: there are some roll-overs in the first column except the first one on top ?? version2 is similar to the first, except I have only 1 column filled. What you see: there are some roll-overs in the first column except the first four on top ?? I think it might be some repeating/stacking in positioning, but to me: it seems like (not to shabby but somewhat) proper css code? NOPE IT'S A VISIBILITY ISSUE See next post... Any idea why this error ONLY in IE7 occurs? And how to solve it?? Alright... i am creating a simple website and because of the way the site is to be created, I am using position: relative. However I'm trying to get the links on the left and right of an image to go under part of the image... In IE it works fine... in Opera, NS, and FF it doesn't. Is there something I need to add to my css to get it to work properly... CSS: Quote: td.homeleft {position:relative; top:50px; left:50px; font-size:14px; } td.homeright {position:relative; top:50px; right:30px; font-size:14px; } HTML Code: <html> <head> <link rel="stylesheet" href="lolli.css" type="text/css"> <title>UF Lollicup!</title> </head> <body bgcolor="fdf066"> <table align="center"> <tr> <td class="homeleft"> <center>Menu<br><br> Shop Now<br><br> What's New<br><br> Promos</center> </td> <td> <img src="images/homepageflower.gif"> </td> <td class="homeright"> <center>Links<br><br> Feeback<br><br> Newsletter<br><br> Pictures</center> </td> </tr> <tr> <td colspan="3" align="center"> <img src="images/bar.gif"> </td> </tr> <tr> <td colspan="3" align="center"> Gainesville, Florida 352-505-3662 </td> </tr> </table> </body> </html> I know some of you don't like tables... sorry for using them. Here's the site I'm working on: Site in Progress Here's what the site should look like: http://www.crash-tech.com/Lollicup/images/main.jpg Also the blue bar at the bottom... I'm going to want to place text on top of that as well, so would use relative positioning again. If anyone can suggest a better way to do this, that would be great. Had also considered doing the main page in Flash or using the image and mapping links. Thanks in advance. Hi im creating a website for a friend and although when i look at the site it looks fine in chrome but out of position in IE. however on my friends computer it is out of line on IE, FF and chrome. the problem is a img used as the background within a div container is showing out side the body container if you get what i mean. here are some links to images from my comp so you can see. just put http:// in front Chrome: i880.photobucket.com/albums/ac2/Kelenved/untitled.jpg IE: i880.photobucket.com/albums/ac2/Kelenved/untitled-2.jpg hope you can help out with this thanks in advance. 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 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! Hello, I am having problems positioning my left menu on non IE browsers, The menu appears fine in IE, can anyone help please, I have attached my code Code:
body {
margin:20px;
background:#ffffff;
text-align:center;
padding:0;
}
#outer {
text-align:left;
border:0px solid #000000;
width:785px;
margin:auto;
}
#hdr {
height:30px;
background:#ffffff;
}
#bar {
height:25px;
background:#ffffff;
border:solid #000000;
border-width:1px 0 1px 0;
}
#bodyblock {
position:relative;
background: #fffff;
width:785px;
padding:0;
}
#l-col {
width:204px;
height:452px;
float:left;
background:#fff;
background-image:url(images/left.jpg);
background-repeat:no-repeat;
padding-bottom:10px;
}
#cont {
width:565px;
background:#ffffff;
border:solid #000000;
border-width:0 0 0 0px;
}
#middle {
width:5px;
float:left;
background:#fff;
}
#ftr {
height:25px;
background:#c0c0c0;
border:solid black;
border-width:1px 0 0 0;
margin:0;
}
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. Has anyone heard of Firefox 4 or Firefox 3.5 positioning a Div 3 pixels higher on a web page than all other A-Grade browsers? If you want to see what I mean, go to baampblue . asystechonline . com / ReconstructIndex.php. Sorry I could not insert a link. I'm a new member. I password protected this to keep bots from scanning it. The username is the word demo. The password is also the word demo. Look for "Carl Gohm" on the right side of the page, under "BAAMP Honors Lifetime Members". Click on the Carl Gohm link. A new rounded corner box will open up in the "Featured Projects" display with a picture and information about Carl. If you look at the new box in IE 8, Opera 11, Chrome 11, or Safari 5.0.5 the new box fits perfectly inside of the Featured Projects display. If you look at the new box in Firefox 4 or 3.5, you should notice that the new box is shifted up 3 pixels too high. The HTML and CSS validate with no errors on the W3C validators. I'm using jQuery to generate the new box for Carl Gohm. I have ruled out the jQuery as the cause of the problem by creating a minimal test case that doesn't involve jQuery. I tried using a clean version of Firefox from Spoon.net, because I thought maybe one of the Add-Ons in Firefox was causing the problem. That didn't make any difference. I tried viewing this on another computer that is running Firefox 4 on Windows XP, but the problem was still there. I used Firebug to disable and then re-enable each line of CSS one at a time to see if there was a CSS problem. I didn't notice an improvement. I just need to know if I am wasting my time trying to troubleshoot something that is not correctable. Thank you in advance for your time. 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 Hello, I don't understand how to fix this right margin problem in IE 6. Of course, the code renders correctly in FF Mac/Win but I can't get the margin right to correctly display as 30px in IE 6. If you can help me out I would appreciate it. Code: #altnavcontainer
{
margin: 68px 30px 0px 0px;
padding: 0;
width: 264;
float: right;
/*border: 1px solid red;*/
}
<div id="altnavcontainer">
<a href="info.php?pt=info" onmouseover="document.info.src=info_on.src" onmouseout="document.info.src=info_off.src"><img name="info" src="images/info_off.png" alt="Info Off" /></a>
<a href="bio.php?pt=bio" onmouseover="document.bio.src=bio_on.src" onmouseout="document.bio.src=bio_off.src"><img name="bio" src="images/bio_off.png" alt="Bio Off" /></a>
<a href="work.php?pt=work" onmouseover="document.work.src=work_on.src" onmouseout="document.work.src=work_off.src"><img name="work" src="images/work_off.png" alt="Work Off" /></a>
<a href="index.php" onmouseover="document.home.src=home_on.src" onmouseout="document.home.src=home_off.src"><img name="home" src="images/home_off.png" alt="Home Off" /></a>
</div>
Thanks, Jason yui.lastsong.net/projecthealth I'm having problems getting the above page to show up correctly in IE6. My headers have a negative left margin and, for some reason, paragraphs below these headers seem also to be displaying this negative margin. It doesn't happen for all paragraphs, and I haven't been able to discern any pattern. The following page is an example of this: yui.lastsong.net/projecthealth/?page=team-staff Additionally, this page is misaligned, despite using essentially the same coding from my other pages (with the exception of the content): yui.lastsong.net/projecthealth/?page=impact-families Any ideas on how to fix this? I've been trying to solve this for many hours. I'm using CSS and transitional tables. I have content with a box of navigation right aligned within the content table. I need to have a gray line in the content area dividing sections. The width of that gray line is dependent on whehter that navigation box is there or not. I've tried two ways to create the line, a table set at 100% with a gray background color and a <hr> tag that is styled in the css. I thought the hr tag was working, but in NS7, the gray line writes over the navigation box. Here's the page: http://www.vma.org/paris/nci-intranet/work-life-services-coachin.html If I use a table width=100%, it starts working in NS7 and Firefox, but stops working in IE. As you can see from the page, the width of the gray line is dependent on the navigation box to the right. The navigation box is a right aligned table floating within the content box. Here's my <hr> definition in the css: hr { border: 0; color: #D5D5D5; background-color: #D5D5D5; height: 1px; text-align: left; padding: 0px; margin: 0px; } Any ideas? Its driving me crazy, I know there's gotta be a simple solution to having the line take up the same amount of space as the text does and no more. Thanks! Hi all, and thanks for reading. I'm doing my first big DIV-based design, and have got it working pretty well, except that I'm getting a fairly large top and slightly large bottom margin on one of the nested DIVs. This has a border running around it, so I really don't want it there. Here's the stylesheet: Code:
<style type="text/css">
BODY {margin:0; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:16px; background-color:#F1F1F1; text-align:center; background-image:url(images/background.gif);}
DIV {background-color:#FFFFFF;}
#container {width:800px; text-align:left; margin:0 auto; border-left:solid 6px #007EC3; border-right:solid 6px #007EC3; border-bottom:solid 6px #007EC3;}
#header {border-bottom:solid 6px #F1F1F1;}
#bodycontainer {border-bottom:solid 6px #F1F1F1; margin:0;}
#menucontainer {width:192px; float:left; clear:left; margin:0;}
#menucontainer DIV {border-top:solid 2px #CCCCCC;}
#contentcontainer {margin-left:192px; border-right:solid 6px #F1F1F1; border-left:solid 2px #007EC3;}
#contentcontainer P {margin-left:20px; margin-right:20px;}
#footer {text-align:center; font-size:12px; font-weight:bold; border-top:solid 2px #007EC3;}
#footer P {margin-top:5px; margin-bottom:5px;}
#footer A {color:#007EC3; text-decoration:underline;}
#footer A:hover {color:#007EC3; text-decoration:none;}
</style>
Here's the processed HTML: Code:
<div id="container">
<div id="header"><img src="images/header.jpg" alt="The International Wildlife Museum" width="800" height="110"></div>
<div id="bodycontainer">
<div id="menucontainer">
<div style="border-top:0;"><a href="info/" onmouseover="changeImage('info',true);" onmouseout="changeImage('info',false);"><img src="images/menu/4/info.gif" name="info" alt="General Info" border="0"></a></div>
<div><a href="about/" onmouseover="changeImage('about',true);" onmouseout="changeImage('about',false);"><img src="images/menu/4/about.gif" name="about" alt="About Us" border="0"></a></div>
<div><a href="exhibits/" onmouseover="changeImage('exhibits',true);" onmouseout="changeImage('exhibits',false);"><img src="images/menu/4/exhibits.gif" name="exhibits" alt="Exhibits" border="0"></a></div>
<div><a href="tour/" onmouseover="changeImage('tour',true);" onmouseout="changeImage('tour',false);"><img src="images/menu/4/tour.gif" name="tour" alt="Tour Info" border="0"></a></div>
<div><a href="education/" onmouseover="changeImage('education',true);" onmouseout="changeImage('education',false);"><img src="images/menu/4/education.gif" name="education" alt="Educational Programs" border="0"></a></div>
<div><a href="events/" onmouseover="changeImage('events',true);" onmouseout="changeImage('events',false);"><img src="images/menu/4/events.gif" name="events" alt="Special Events" border="0"></a></div>
<div><a href="membership/" onmouseover="changeImage('membership',true);" onmouseout="changeImage('membership',false);"><img src="images/menu/4/membership.gif" name="membership" alt="Membership" border="0"></a></div>
<div><a href="theater/" onmouseover="changeImage('theater',true);" onmouseout="changeImage('theater',false);"><img src="images/menu/4/theater.gif" name="theater" alt="Wildlife Theater" border="0"></a></div>
<div><a href="facility/" onmouseover="changeImage('facility',true);" onmouseout="changeImage('facility',false);"><img src="images/menu/4/facility.gif" name="facility" alt="Facilities/Rental" border="0"></a></div>
<div><a href="contacts/" onmouseover="changeImage('contacts',true);" onmouseout="changeImage('contacts',false);"><img src="images/menu/4/contacts.gif" name="contacts" alt="Contacts" border="0"></a></div>
</div>
<div id="contentcontainer">
<p>The International Wildlife Museum is a non-profit educational program of Safari Club International Foundation (SCIF). SCIF funds and manages worldwide programs dedicated to conservation, outdoor education and humanitarian services.</p>
<p>Founded in 1988, the museum is dedicated to increasing knowledge and appreciation of the diverse wildlife of the world, as well as explaining the role of wildlife management in conservation.<br> </p>
<div id="footer">
<p><a href="info/">General Info</a> | <a href="about/">About Us</a> | <a href="exhibits/">Exhibits</a> | <a href="tour/">Tour Info</a> | <a href="education/">Educational Programs</a></p>
<p><a href="events/">Special Events</a> | <a href="membership/">Membership</a> | <a href="theater/">Wildlife Theater</a> | <a href="facility/">Facilities/Rental</a> | <a href="contacts/">Contacts</a></p>
<p> <p><a href="http://www.safariclubfoundation.org/" target="_blank"><img src="images/sciflogo.gif" alt="SCI Foundation" width="52" height="39" border="0" align="absmiddle"></a>
<img src="images/footerinfo.gif" alt="Copyright 2004, Safari Club International Foundation" width="372" height="55" vspace="10" align="absmiddle"></p>
</div>
</div>
</div>
</div>
Here's a link to the live page The margin is above and below the text and menu. Any help would be appreciated. -colin on this page the image on the left that reads "Grade" is 10px from the side (where it should be) in IE... but in firefox, it isnt 10px from the side... but rather 0px... when i change the margin-right to 20px instead of 10px, it looks fine in Firefox, but 10px too far over in IE. any help would be GREAT thanks Problem 1: I specified #pic with a height of 176px and a border of 1px. The total height should be 178px, correct? Measuring it with my handy web developer ruler, it only measures 176px tall, including the border or 174px excluding the borders. Why would this occur? Aren't borders supposed to go around an element not be included in the element? This occurs in both Firefox and IE. Problem 2: Same problem area as above, except I'm attempting to add 3px left and bottom margin around several #pic. Using my trusty ruler again, I'm getting a margin of only 1px around my #pic's. Instead, it appears that the margin is including the 1px border from the two #pics, totaling 3px. This only occurs in Firefox though, IE renders it as I would have guessed. This means that the .right content doesn't line up in either IE or Firefox, depending on which one I correct it for. Below is a picture to explain what I'm attempting to say. Here is the code (sorry I'm building it for a friend and he is working on a host -- so its local only): Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body
{
background-color: #615947;
}
#container
{
width: 800px;
margin: 10px auto;
color: #333;
}
#nav
{
}
#navcontainer {
padding: 0;
height: 35px;
}
#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
width: 154px;
height: 16px;
}
#navcontainer ul li a
{
position:relative;
background: #AE0000;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
padding: 8px;
margin: 0 0 0 0;
color: #f5d7b4;
text-decoration: none;
display: block;
text-align: center;
font: 13px/15px Verdana,Arial,Helvetica,sans-serif;
font-weight:bold;
}
#top
{
background-color: #AD9F7F;
background-image: url(<a href="(URL address blocked: See forum rules)" rel="nofollow">(URL address blocked: See forum rules)</a>);
background-repeat: no-repeat;
height: 150px;
width: 767px;
margin-bottom: 3px;
}
.left
{
display:inline;
border: 1px solid black;
background-color: #fff;
float: left;
width: 385px;
margin-bottom: 3px;
padding: 0;
margin-right: 3px;
}
#updates
{
height:539px;
}
#topleft
{
margin: 0px;
height: 14em;
border-bottom: 1px solid black;
}
#topleft h3
{
background-color: #9E9E9E;
margin: 0px;
color: white;
font-family: sans-serif;
padding-left: 12px;
font-size: 12px;
}
#bottomleft
{
height: 309px;
margin: 0px;
overflow: auto;
}
#bottomleft h3
{
background-color: #9E9E9E;
margin: 0px;
color: white;
font-family: sans-serif;
padding-left: 12px;
font-size: 12px;
}
.right
{
margin-left: 385px;
padding: 0;
width: auto;
background-color: #615947;
}
.pic
{
width: 186px;
height: 176px;
margin: 0px 3px 3px 0px;
border: 1px solid black;
float: left;
background-color: #616161;
}
#footer
{
clear: both;
margin: 0;
color: #333;
background-color: #AD9F7F;
border: 1px solid black;
width: 767px;
}
</style>
<title>CSS</title>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="navcontainer">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">THE ARTIST</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">GUESTBOOK</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="left">
<div id="topleft">
<h3>Welcome</h3>
</div>
<div id="bottomleft">
<h3>Daves daily news</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
</div>
<div class="right">
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Image link http://lh5.ggpht.com/_zKwoPOwgFUM/SyNwWAxR0ZI/AAAAAAAAAKI/CzOKCNVox3E/prob.jpg Hello, I'm having a slight issue with what I belive to be margins. In IE half the logo is being cut off and in firefox I have a grey area above the menu bar that shouldn't be there. I have checked both my css and xhtml both validated fine with out any warnings. I'm pretty new to CSS and this is starting to annoy me =\. **WARNING** The site is political in nature. Links to the code: h**p://www [.] dncreform [.] com / t / css / main.css h**p://www [.] dncreform [.] com / t / Thank You, William First things first, both my HTML and CSS validate. I'm very VERY green with CSS, but because other people don't seem to think so I'm making a website. My trouble is with IE. The website is perfect in Firefox. I have this div: css Code: Original - css Code div.main { background-color: white; margin-left: auto; margin-right: auto; width: 35em; border-width: .1em; border-color: #aa505f; border-style: solid; text-align: left; } .alignment { text-align: center }
And this address stuff: CSS Code: Original - CSS Code address { background-color: #FFFFFF; margin-right: 5em; width: 15em; border-width: .1em; border-color: #aa505f; border-style: solid; float: right; line-height: 1em }
address {
HTML: HTML Code: Original - HTML Code <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "BLOCKEDURL"> <html> <head> <title> Le Sac Magique </title> <link href="lsmcss.css" rel="stylesheet" type="text/css"> </head> <body> <address> Contact XXXXX by mobile at XXXXXXXX, or <a href="mailto:XXXXXXX">email her at THIS BLOCKED EMAIL ADDRESS.</a> </address> <div class="alignment"> <div class="main"> This is some text! </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "BLOCKEDURL"> <html> <head> <title> Le Sac Magique </title> <link href="lsmcss.css" rel="stylesheet" type="text/css"> </head> <body> <address> Contact XXXXX by mobile at XXXXXXXX, or <a href="mailto:XXXXXXX">email her at THIS BLOCKED EMAIL ADDRESS.</a> </address> <div class="alignment"> <div class="main"> This is some text! </div> </div> </body> </html> In Firefox, it shows as it should a centered box with a white background and maroon border and a right-aligned box of the same description besides its italics. However, in IE the box that should be centered is pushed to the left a bit. It is as if the box is aligned left and has a left margin. I am aware that IE does not support margin:auto, but I have tried as you can see to fix it by using text-align:center and a parent div to no avail. Something tells me that my floated box is the source of this trouble, but I would not know where to start. Can anyone help me? Hi, beeing fairly new to CSS I am having a hard time solving this issue, hopefully it has a simple solution which someone might help me with. Here goes, In IE this page aligns nicely at the top of the browser window just like I want it to, but in FF and Opera the whole page is moved down maybe 5px or so, the code is pasted below. Also, it seems to me that IE stacks the layers tighter, bordder to border, than FF and Opera which seems to add padding or margin to the layers. I am probably way off but I would be extremely happy for any help. 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" lang="en">
<head>
<style type="text/css">
html{
margin:0px;
padding:0px;
}
body {
background: #FFF;
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size:62.5%;
text-align:center; /*fix for centering the content div for IE 5.5*/
}
#content {
width:748px;
margin:0px auto;
padding:0px;
text-align:left; /*IE 5.5 alignment fix*/
}
#tipsHeader{
height:113px;
background:#FFF url(images/Logo.gif) no-repeat top left;
margin:0px;
padding:0px;
}
#tipsHeader h1 span {
display:none;
margin:0px;
padding:0px;
}
#bigProdDisplay{
width:448px;
height:298px;
text-align:left;
float: left;
}
#productSlogan{
width:300px;
height:298px;
background: #FFF url(images/squareHeaderParotid.gif) no-repeat top left;
margin:0px;
padding:0px;
text-align:right;
float: right;
}
#productSlogan h3 span {
display:none;
}
/*==========NAV STYLES============*/
#navcontainer{
margin-bottom:25px;
}
#navcontainer ul
{
padding-left: 0px;
margin-left: 0px;
background-color: #fff;
float: left;
width: 100%;
font-family: Verdana, arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.2em 1.2em;
background-color: #fff;
color: #4E5C8D;
text-decoration: none;
float: left;
font-size: 1.2em;
font-weight: normal;
}
#navcontainer ul li a:hover
{
background-color: #fff;
color: #F66;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
#home #navlist-home a,
#advantages #navlist-advantages a,
{
color: #F66;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
#home #navlist-home a:hover,
#advantages #navlist-advantages a:hover,
{
text-decoration: none;
}
#navlist a:active {
color: #333;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
/*======END NAV STYLES======*/
</style>
</head>
<body id="home">
<div id="content">
<div id="tipsHeader"><h1><span>Header text</span></h1></div>
<div id="bigProdDisplay"><img src="images/BigSmall.jpg" alt="" /></div>
<div id="productSlogan"><h3><span>mighty slogan hides behind image</span></h3></div>
<div id="navcontainer">
<ul id="navlist">
<li id="navlist-home"><a href="#">HOME</a></li>
<li id="navlist-advantages"><a href="#">ADVANTAGES</a></li>
<li id="navlist-application"><a href="#">APPLICATION</a></li>
<li id="navlist-conventions"><a href="#">CONVENTIONS</a></li>
<li id="navlist-contact"><a href="#">CONTACT US</a></li>
<li id="navlist-references"><a href="#">REFERENCES</a></li>
</ul>
</div>
</div>
</body>
</html>
|
|||||||