bujutsu Posted December 7, 2005 Share Posted December 7, 2005 (edited) ok, here's the problem: i made a site without tables, and it works just fine in firefox and netscape. but when i tried to use it in opera and ie, it screws up. in opera, the div width changes and theres some hole around 5px above. in ie, the divs wont go to the center, and it displace some picture. could u tell me what's goin on?here's the html coding <html><head><title>::Stuphed Room::</title><link rel="stylesheet" href="style.css" type="text/css"></head><body><div id=website><div id=container><div id=header> </div><div id=welcome> </div> <div id=left> <div class=link id=box> <div id=head> <h1> Link</h1> </div> <p><a href=www.a.c>Link here</a></p> <div id=foot> </div> </div> <div class=link id=box> <div id=head> <h1> Link</h1> </div> <p><a href=www.a.c>Link here</a></p> <div id=foot> </div> </div> </div> <div id=right> <h1>CONTENT</h1> <div class=content id=box> <div id=head> </div> <div class=ava> </div> <h2>Some News Title Here</h2> <h3>Some day and date</h3> <h4>Posted By someone</h4> <p>Content here</p> <div id=foot> </div> </div> <div class=content id=box> <div id=head> </div> <div class=ava> </div> <h2>Some News Title Here</h2> <h3>Some day and date</h3> <h4>Posted by someone</h4> <p>Content here</p> <div id=foot> </div> </div> </div></div></div></body></html> here's the css body, html { font:12px Verdana, Geneva, Arial, Helvetica, sans-serif; background: #fff; height:100%; margin-top:0px; }h1 { font-weight:bold; font-size:16px; letter-spacing:10px; margin:0px; margin-bottom:5px; color:#767777; filter:progid:dximagetransform.microsoft.alpha (opacity=70); -moz-opacity:0.7; }h2, h3 { font-weight:bold; font-size:14px; margin:0px; margin-bottom:5px; color:#767777; }h3 { font-size:12px; color:#767777; }h4 { font-weight:normal; font-style:italic; font-size:10px; margin:0px; margin-bottom:15px; color:#767777; }p { padding: 0px 8px 0px 8px; color:#8a8a8a; }#container { margin: 0px auto 0px; padding: 0px; width: 740px; height:100%; position:relative; }#website { background:url(bg.gif) repeat-y #fff; width:760px; margin:0px auto 0px; height:100%; position:relative; }#header { background: url(banner.gif) no-repeat center; height: 155px; width: 740px; }#welcome { width:740px; height:45px; background: #fff url(welcome.gif) no-repeat; }#right { width: 523px; float:right; padding:0px 16px 0px 0px; }#left { width: 163px; float:left; padding: 0px 0px 0px 10px; }#box { border: 1px solid #98adb6; padding:0px; }#padding { padding: 4px 8px; }#head { background: #fff url(head.gif) repeat-x; height: 15px; }#foot { background: #fff repeat-x url(foot.gif); height:20px; }.content { text-align:justify; margin-bottom:10px; }.link { text-align:center; background:#fff; margin-bottom: 10px; }.ava { border:1px dashed #bfc6cc; background:url(avatar.jpg) no-repeat; height:48px; width:48px; float:left; margin-right:18px; margin-top:4px; position:relative; left:8px; }a:link, a:visited, a:active{ text-decoration: none; color: #4c7ca9; font-weight:bold; }a:hover { text-decoration: underline; font-weight:bold; color: #ed9906; }.fade img { filter: progid: dximagetransform.microsoft.alpha (opacity=50); -moz-opacity: 0.5; {.fade:hover img { filter: progid: dximagetransform.microsoft.alpha (opacity=100); -moz-opacity: 1; } thx for advance!--------------------Changed to [codebox] to save us the trouble of an awful amount of scrolling...[/i] Edited December 7, 2005 by Jonas Link to comment Share on other sites More sharing options...
Mimika Posted December 7, 2005 Share Posted December 7, 2005 well i think its the classes thats not supported in Opera in your code. When i make classes on my page and i check with the inbuild help to check browser supports in Macromedia Dreamweaver MX.Its about 80% of my errors are involved with opera and it dont like the following tags either.scriptsCSSclassstylesIframesMetathe browser help goes up to Opera 6.0 but just a few errors are displayed over 3.0. Link to comment Share on other sites More sharing options...
bujutsu Posted December 7, 2005 Author Share Posted December 7, 2005 wait, i dont understand. which class isn't supported in opera? and wat about the ie? and wat is the difference between class and id anyway? up till now i just blindly using id or class. could tat make some mistakes? Link to comment Share on other sites More sharing options...
Mimika Posted December 7, 2005 Share Posted December 7, 2005 well i checked you code in MX (not the css file codes) andID/classes anything related to css are not supported in Opera 3.0 and lower what i know. You might need to upgrade opera if you got an old one. but then again in the linking to the css file ( type="text/css" ) are not supported in Opera 6.0 and lower if you want to center in IE use text-align: center;think someone with higher experiance in this might give better answer Link to comment Share on other sites More sharing options...
bujutsu Posted December 7, 2005 Author Share Posted December 7, 2005 nope, i hav the latest opera version. the css works just fine in my opera, its just tat theres some space on the very top of the page. which is about 5px. tat thing happened in firefox too, but after i inserted height:100% to the web container, the space dissapeared. anybody hav some experience about case like this? thx for the advice tho mimika ^^. Link to comment Share on other sites More sharing options...
bujutsu Posted December 7, 2005 Author Share Posted December 7, 2005 sory for double posting. after i followed mimika's advice which is to use text-align:center, it works and centered my layout in ie. but now i have 2 problems. the first one is tat in ie, at the very bottom of the layout, there's a space about 10px high showed up and tats irritating me. the second is in opera, there r 2 spaces appeared on above and bottom of the layout, the height is approximately 5px each. thx in advance! Link to comment Share on other sites More sharing options...
Mimika Posted December 7, 2005 Share Posted December 7, 2005 mmh dunno if this works but put in these codes margin: 0px; margin-top: 0px; it should work in IE. Opera I dunno Link to comment Share on other sites More sharing options...
Jonas Posted December 7, 2005 Share Posted December 7, 2005 html, body {margin: 0;padding: 0;} Link to comment Share on other sites More sharing options...
bujutsu Posted December 7, 2005 Author Share Posted December 7, 2005 thx jonas and mimika, tat really helped me. it worked on both browser. Link to comment Share on other sites More sharing options...
tuffrabit Posted December 7, 2005 Share Posted December 7, 2005 IE doesn't render the W3C box modal correctly, but FF does. The problems you are having is not your code... its just that FF is rendering the HTML and CSS the way it was intended and IE is Bill Gatesing you.Just google IE box modal fixes, there are a ton of tutorials related to it... espessially when talking about liquid, tableless, div based sites using css.as far as your centering problem, use the negative margin theory:set the left of an element at 50%set that elements left margin at its negative halfexample:#container {position:absolute;width:500px;left:50%;margin-left:-250px;}that center the mess out of anything. =) enjoy Link to comment Share on other sites More sharing options...
bujutsu Posted January 15, 2006 Author Share Posted January 15, 2006 grrr..... sory to bother u guys again, but this is another problem i came to when i use ie. behind the .png pictures, its not transparent, but theres some kind of green background. and it looks like in ie the size of my layout shrinks A LOT. maybe something wrong with my code? body, html { font:12px Verdana, Geneva, Arial, Helvetica, sans-serif; background: transparent; height:100%; margin:0; padding:0; margin-top:0px; text-align:center; min-height:100%; }a { text-decoration: none; color: #0f7ccf; }a:hover { text-decoration: none; color: #ed9906; }h2, h3 { font-weight:bold; font-size:14px; margin-top:5px; margin-bottom:5px; color:#708288; }h3 { font-size:12px; }h4 { font-weight:normal; font-style:italic; font-size:10px; margin:0px; margin-bottom:15px; color:#708288; }h1 { font-weight:normal; font-size:10px; margin:0px; color:#708288; }p { padding: 0px 8px 0px 8px; color:#708288; background:white; font: 10px; }#container { margin: 0px auto 0px; padding: 0px; width: 740px; }#website { background:url(bg.png) repeat-y transparent; width:760px; margin:auto; }#header { background: url(banner.gif) no-repeat center; height: 155px; width: 735px; margin:0px; margin: 0px 2px 20px 3px; padding-top:5px; border-top:1px solid #98adb6; border-bottom:1px solid #98adb6; }#right { width: 523px; float:right; margin-right:15px; }#left { width: 163px; float:left; margin-left:5px; padding: 0px 12px 0px 10px; border-right:1px solid #bdc8d1; }#box { border: 1px solid #98adb6; padding:0px; background:transparent; margin-bottom:2px; }#head, #head2 { background: #fff url(head.gif); height: 15px; }#head2 { background: url(head2.gif); }#foot { background: #fff repeat-x url(foot.gif); height:20px; }.content { text-align:justify; margin-bottom:10px; }.link { text-align:center; background:#fff; }.avains { border:1px solid #bfc6cc; height: 60px; width:60px; float:left; margin-right:18px; margin-top:4px; position:relative; left:8px; }.ava { border:1px solid #bfc6cc; background:url(avatar.jpg) no-repeat; height:48px; width:48px; margin: 5px; padding:0px; }.nav ul { width:87%; margin:0; padding:0; left:10px; position:relative; }.nav li, li:hover { list-style-image: url(ul1.gif); list-style-position:inside; border-bottom:1px #829599 dashed; text-decoration:none; color: #4c7ca9; text-align:left; }.nav li:hover { list-style-image: url(ul2.gif); }.nav a { color:#0f7ccf; text-decoration:none; }.nav a:hover { color: #ed9906; }#copy { clear:both; width: 741px; background: transparent url(copy.gif); text-align:center; }.roll a { filter: progid: dximagetransform.microsoft.alpha (opacity=50); -moz-opacity: 0.5; }.roll a:hover { filter: progid: dximagetransform.microsoft.alpha (opacity=100); -moz-opacity: 1; } <html><head><title>Sanmar Is Over</title><link rel="stylesheet" href="style.css" type="text/css"></head><body><div id=website><div id=container><div id=header></div> <div id=left> <div class=link id=box> <div id=head> <img src=nav.png> </div> </div> <div class=link id=box> <div id=head2></div> <div class=nav> <ul> <li><a href=#>Home</a></li> <li><a href=#>Articles</a></li> <li><a href=#>Staff</a></li> <li><a href=#>Forum</a></li> </ul> </div> <div id=foot></div> </div> <br> <div class=link id=box> <div id=head> <img src=link.png> </div> </div> <div class=link id=box> <div id=head2></div> <p><a href=www.http://www.mozilla.com/firefox/><img src=get.gif border=0></a></p> <div id=foot></div> </div> <br> <div class=link id=box> <div id=head> <img src=link.png> </div> </div> <div class=link id=box> <div id=head2></div> <p><img src=linktous.gif></p> <div id=foot></div> </div> <br> </div> <div id=right> <div class=content id=box> <div id=head> </div> </div> <div class=content id=box> <div id=head2></div> <div class=avains><div class=ava></div></div> <h2>Congratz!</h2> <h3>Thursday, 8 December 2005</h3> <h4>Posted by Bujutsu</h4> <p>Content here <a href=dl.html>dladhafsl</a> adfa sdfasf sadfa sdfsa fasd fasdf asdfasdf asdf asdfas df asdf asdf sdf sadf asdf sdf asdf sad fasf sadf asdf asdf asdfasd fasdfa sdfasdf asdf asdfsadf sadf asdf sdf asdfsadf asdf sdfasdf sdf asdfasdf asdfasdf sadf</p> <div id=foot></div> </div> </div> <div id=copy> <h1> All content on this site is the property of and copyright their respective owners.<br> Web coding & design by <a href="mailto:blockword@gmail.com">Bujutsu</a> </h1> </div></div></div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now