Jump to content

margin in IE


iRyan
 Share

Recommended Posts

Hi,I'm still learning css, but i'm making good progress since it is not with the IE :).anyways, I have this website, everything looks fine in Safari, Firefox, and Chrome. So if someone can help me with that I'll really appreciated.here is the website :www.irayan.comlu.com/seniorand here is one of the pages html and the csshtml<head><title>UNC Charlotte Club Baseball Website</title><link href="style.css" rel="stylesheet" type="text/css" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css"><!--.style1 { color: #b2d094}--></style></head><body><div id="wrapper"> <div id="title"></div> <div id="header"> <div align="center"><img src="img/head.jpg" alt="header" width="770" height="163" /></div> </div> <div class="container"> <ul id="navCircle"> <li><a href="http://irayan.comlu.com/senior/index.html">Home</a></li> <li><a class="active" href="http://irayan.comlu.com/senior/Directions.html">Directions</a></li> <li><a href="http://irayan.comlu.com/senior/Roster.html">Roster</a></li> <li><a href="http://irayan.comlu.com/senior/Schedule.html">Schedule/Results</a></li> <li><a href="http://www.uncc.edu/">Pictures</a></li> <li><a href="http://irayan.comlu.com/senior/Contact.html">Contacts</a></li> </ul> </div> <div id="content"> <h2>Directions</h2> <p> <iframe width="540" height="310" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Hayes+Stadium+Charlotte,+NC+28262+&sll=35.308577,-80.739212&sspn=0.017861,0.034504&ie=UTF8&hq=Hayes+Stadium&hnear=Charlotte,+NC+28262&ll=35.316386,-80.734835&spn=0.016985,0.034504&z=14&iwloc=A&cid=3688877276848267174&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Hayes+Stadium+Charlotte,+NC+28262+&sll=35.308577,-80.739212&sspn=0.017861,0.034504&ie=UTF8&hq=Hayes+Stadium&hnear=Charlotte,+NC+28262&ll=35.316386,-80.734835&spn=0.016985,0.034504&z=14&iwloc=A&cid=3688877276848267174" style="color:#0000FF;text-align:left">View Larger Map</a></small></p> <p>Home games are played at Mint Hill Sports Complex:</p><h2>from I-77:</h2> <p>Take exit 13A off I-77 and merge onto I-85 N. Once on I-85 N take exit 48 onto I-485 S. Take exit 44 and turn left off exit onto Fairview Rd. Take first left onto Brief Rd and the Mint Hill Sports Complex will be on your right about 1.5 miles down the road.</p><h2>From I-85:</h2> <p>Take exit 48 onto I-485 S. Take exit 44 and turn left off exit onto Fairview Rd. Take first left onto Brief Rd and the Mint Hill Sports Complex will be on your right about 1.5 miles down the road.</p> </div> <div id="right-col"> <h2>Best player</h2> <p align="center"><img src="img/Goans.jpg" width="175" height="450" class="illus" alt="best player" /></p> <h2>Updates</h2> <div class="scroll"> <h3>March 2010</h3> <p class="news">Redesign UNCC club baseball website.</p> </div> <h2>Links</h2> <ul class="side"> <li><a href="http://www.uncc.edu/">UNCC</a></li> </ul> </div> <div style="clear:both;"></div> <div id="footer"> <p align="center" class="style1">©2009 <a href="http://www.uncc.edu">UNC Charlotte</a> <a href="http://info.uncc.edu/redirect/?p=copy">Copyright</a> | <a href="http://info.uncc.edu/redirect/?p=privacy">Privacy Statement</a></p> <p align="center"><a href="http://info.uncc.edu/redirect/?p=directions" title="Click here for maps & directions">The University of North Carolina at Charlotte<br /> 9201 University City Blvd • Charlotte, NC 28223-0001 • (704) 687-2000</a></p> </div></div></body></html>-----------------css body {margin : 0;padding : 0;text-align : left;font : 75% "Trebuchet MS", verdana, arial, sans-serif;line-height : 1.5em;background : #BCE0A8 url(img/bg.jpg) top center repeat-y;color : #000;}.gallerycontainer{position: relative;/*Add a height attribute and set to largest image's height to prevent overlaying*/}.thumbnail img{border: 1px solid white;margin: 0 5px 5px 0;}.thumbnail:hover{background-color: transparent;}.thumbnail:hover img{border: 1px solid blue;}.thumbnail span{ /*CSS for enlarged image*/position: absolute;background-color: lightyellow;padding: 5px;left: -1000px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;}.thumbnail span img{ /*CSS for enlarged image*/border-width: 0;padding: 2px;}.thumbnail:hover span{ /*CSS for enlarged image*/visibility: visible;top: 0;left: 300px; /*position where enlarged image should offset horizontally */z-index: 50;}.thumbnail2 img{border: 1px solid white;margin: 0 5px 5px 0;}.thumbnail2:hover{background-color: transparent;}.thumbnail2:hover img{border: 1px solid blue;}.thumbnail2 span{ /*CSS for enlarged image*/position: absolute;background-color: lightyellow;padding: 5px;left: -1000px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;}.thumbnail2 span img{ /*CSS for enlarged image*/border-width: 0;padding: 2px;}.thumbnail2:hover span{ /*CSS for enlarged image*/visibility: visible;top: 0;left: 150px; /*position where enlarged image should offset horizontally */z-index: 50;}#customers{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;width:100%;border-collapse:collapse;}#customers td, #customers th {font-size:1em;border:1px solid #4A682D;padding:3px 7px 2px 7px;}#customers th {font-size:1.1em;text-align:left;padding-top:5px;padding-bottom:4px;background-color:#5B8037;color:#ffffff;}#customers tr.alt td {color:#000000;background-color:#b2d094;} /*CONTAINER*/#wrapper {position : relative;width : 780px;margin-right : auto;margin-left : auto;padding : 0;border : 0px solid green;background : #fff;} /*TOP TITLE BAR*/#title {width : 770px;margin-left : 5px;padding : 0;text-align : right;background : #fff;color : #000;}#title h1 {margin : 0;padding : 10px;font-size : 175%;text-transform : uppercase;letter-spacing : 5px;background : inherit;color : #BCE0A8;} /*BANNER*/#header {background : url(images/head.jpg) no-repeat;width : 770px;height : 200px;margin : 0 0 0 5px;padding : 0 0 0 0;} /*TOP NAVIGATION*/.container {width : 770px;height : 35px;margin : 20px 0 10px 5px;}#navCircle {margin : 0;padding : 0 0 20px 20px;border-bottom : 1px solid #b2d094;}#navCircle li {margin : 0;padding : 0;display : inline;list-style-type : none;}#navCircle a:link, #navCircle a:visited {float : left;font-size : 1.3em;padding : 0 25px 15px 25px;text-decoration : none;background : inherit;color : #a48c06;}#navCircle a:link.active, #navCircle a:visited.active, #navCircle a:hover {background-color : inherit;color : #6a5e16;background : url(img/arrow.jpg) no-repeat bottom center;} /*MAIN CONTENT*/#content {width : 560px;float : left;margin-top : 0;margin-left : 11px;padding : 5px;border-right : 1px solid #b2d094;}#content p {padding : 0 20px;} /*SIDEBAR*/#right-col {width : 175px;margin : 5px 0 0 590px;border-left : 1px none #28460a;padding : 3px;} /*FOOTER*/#footer {margin : 50px 0 0 0;padding : 5px;font : 90% "Trebuchet MS", verdana, arial, sans-serif;background : #434d43;color : #fff;}#footer a:link, #footer a:visited {background : inherit;color : #b2d094;}#footer a:hover {background : inherit;color : #fff;text-decoration : none;} /*SCROLLBAR*/div.scroll {overflow : auto;height : 10em;width : 150px;padding : 1ex;margin : 0 0 30px 5px;border : 1px solid #345411;background : #BCE0A8;color : #000;} /*TYPOGRAPHY*/h2 {margin : 20px;font-size : 140%;text-transform : uppercase;letter-spacing : 2px;background : inherit;color : green;}h3 {margin : 5px;font-size : 120%;letter-spacing : 5px;background : inherit;color : green;}blockquote {font-weight : bold;font-style : italic;color : #b29b35;} /*LINKS*/a img {border : none;}a:link, a:visited {text-decoration : none;background : inherit;color : #457C05;}a:hover {text-decoration : underline;background : inherit;color : #666;}ul.side {list-style-type : square;padding : 0;margin : 0;background : inherit;color : #457C05;}.side li {padding-left : 0.2em;margin-left : 2em;} /*CLASSES*/.news {font-size : 90%;background : inherit;color : #000;}.imgleft {float : left;border : 1px solid #345411;padding : 5px;margin-right : 15px;}.imgright {float : right;border : 1px solid #345411;padding : 5px;margin-left : 15px;}----------------any help into this would be really appreciatedthanks

Link to comment
Share on other sites

would you mind being specific with the problem?without looking at anything but the first few lines of HTML, the first thing I can tell you is that not using a DTD is a bad start.

Edited by thescientist
Link to comment
Share on other sites

the problem is that , when you are using IE all the whole page shift to the left !! and not being in the center as the Firefox, etc.and coule you please tell what is DTD ? and what's the benefit of having DTD ?thanks

Link to comment
Share on other sites

and coule you please tell what is DTD ? and what's the benefit of having DTD ?
I so wish the answer to this question was pinned somewhere in this forum...The short answer is that using a DTD (doctype declaration) forces a browser to render to a certain set of standards, and provides for greater reliability when designing. A strict one is the best one, especially when trying to compare sites between IE and FF, Chrome, etc. The long answer is just that, so I'll let you do a little independent research on the issue. There's gotta be answers all over this forum to this question.This would also be a good time to point out the benefits of validating your code, as it goes hand in hand with using a DTD.To center block level elements you can use margin: 0 auto, to center inline elements, you can use text-align: center on the parent element.Also, why position: relative on the wrapper div? Edited by thescientist
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...