A Problem With FF and IE Compatibility, can't fix the navigation in IE... |
 Oct 31 2008, 12:26 PM
Post
#1
|
|
 The Procrastinator  Group: Member Posts: 56 Joined: Sep 2006 Member No: 467,931  |
Before submitting this particular layout to cB, I checked how it looked in Internet Explorer and the navigation was misplaced. I tried padding and margin... but nothing would budge that navigation. ;o Everything looks perfect in Firefox... but I just can't fix it in IE!!!
Anyone? Please? T-T View the problem here Left pic = screenshot in FF ; Right pic = screenshot in IE     CODE <html>
<head> <title>Le Dolci: Il Mio Amore</title> <style type="text/css"> #content A, #content A:link, #content A:visited {font-family: georgia; text-decoration: none; color:#5ea4af; cursor: crosshair; font-size: 8pt; border-bottom: 1px dotted #a3ccd4; font-weight: bold;} #content A:hover {font-family: georgia; text-decoration:none; color:#7aaf5e; cursor: crosshair; font-size: 8pt; border-bottom: 1px dotted #86b9c3; font-weight: bold;} #navigation A, #navigation A:link, #navigation A:visited {display: block; text-decoration: none; font-family: georgia; color: #eee9bb; background-color: #c51641; border-bottom: 2px solid #c51641;} #navigation A:hover {display: block; cursor: ne-resize; text-decoration: none; font-family: georgia; color: #fff; background-color: #34867f; border-bottom: 2px solid #ae8b5e;} b {font-weight: bold; color: #b93556;} i {font-family: trebuchet ms; font-size: 9pt; font-style: italic; color: #188682;} u {text-decoration: underline; color: #756536; border-bottom: 1px dashed #4faa69;} p {margin-bottom: -5px; _margin-bottom: -10px;} body { background: #8cb69b; text-align: center; min-width: 489px;} div.wrapper { text-align: left; margin-left: auto; margin-right: auto;} #container { background: transparent; width: 489px; margin: 0 auto;} #header1 {width: 489px; height: 100px; background: url(http://i79.photobucket.com/albums/j155/dreamgurl36/dolce_01.jpg) no-repeat; z-index: 1;} #header2 {width: 489px; height: 100px; background: url(http://i79.photobucket.com/albums/j155/dreamgurl36/dolce_02.jpg) no-repeat; z-index: 1;} #header3 {width: 489px; height: 100px; background: url(http://i79.photobucket.com/albums/j155/dreamgurl36/dolce_03.jpg) no-repeat; z-index: 1;} #header4 {width: 489px; height: 100px; background: url(http://i79.photobucket.com/albums/j155/dreamgurl36/dolce_04.jpg) no-repeat; z-index: 1;} #header5 {width: 489px; height: 100px; background: url(http://i79.photobucket.com/albums/j155/dreamgurl36/dolce_05.jpg) no-repeat; z-index: 1;} #header6 {width: 489px; height: 43px; background: url(http://i79.photobucket.com/albums/j155/dreamgurl36/dolce_06.jpg) no-repeat; z-index: 1;} #content { width: 463px; height: 230px; overflow: scroll; float: left; margin-top: -240px; margin-left: 20px; text-align: justify; z-index: 2; overflow-x: hidden; padding-right: 6px; } #navigation { width: 110px; float: left; text-align: center; margin-top: -240px; margin-left: -96px; _margin-left: 0px; line-height: 18px; } #zone1 { /* imagemap */ float: left; width : 85px; height: 28px; margin-left: 14px; margin-top: 15px; text-decoration: none; border: none; cursor: hand; } body {color:#494136;font-family: arial; font-size: 8pt; line-height: 13px;} h1 { display: block; margin-left: auto; margin-right: auto; text-align: center; font-family: "arial"; font-weight: bold; font-size: 10pt; letter-spacing: 1px; color: #c51641; text-decoration: none; height: 9px; border-bottom: 8px solid #c1e8b7; background-color: #e8b7c0; margin-bottom: -6px; padding-top: 1px;} h2 {display: block; text-align: center; font-family: verdana; font-size: 7pt; letter-spacing: 1px; text-transform: uppercase; color: #c51641; background-color: #eee9bb; border-top: 4px dotted #acd1b9; margin-bottom: 1px;} </style></head> <body> <div id="container"> <div id="header1"><a id="zone1" href="http://dreamgurl36.createblog.com" title="Designed & Coded By: dreamgurl36"></a></div><div id="header2"></div><div id="header3"></div><div id="header4"></div><div id="header5"></div><div id="header6"></div> <div class="wrapper"> <div id="navigation"> <h2>Navigation</h2> <a href="#">Home</a> <a href="#">Content</a> <a href="#">Webmistress</a> <a href="#">Affiliates</a> <a href="#">Site History</a> </div> <div id="content"> <h1>About This Layout :: Infatuation</h1> <p><b>Things I love about this layout:</b> <i>yummy image, complimentary colors, and it's cute small size.</i> Woooo~ Cuppycakes. XD Just some coloring magic in photoshop and <u>BOOM!</u> A fabulous image is created. The rest of the layout was made in GIMP, the only thing I know how to use effeciently (or let's say... my <i>tool of choice</i>). Anyway... I'm very pleased with how it turned out. Oh yeah, it looks best in higher screen resolutions, I believe. :) If it's viewed from on a small screen, the page scrollbar will appear... and for some reason I can't stand that. It looks perfectly nice in my resolution of <b>1280x800</b>.</p> <p>So... this is where your main content will go~! Fill up as much or as little as you want! XD It's all up to you! Please do NOT change the images/layout in any way. And it goes without saying.... <b>do not remove the credit</b>. I mean... I've taken the ultra long time to code this, so the least you can do is leave the credit there. But of course.... you may edit the navigation, contents, and such to suit your website needs. ^^ I think you'd need some basic knowledge of <u>html and css</u> to be able to fully make use of this layout. But it's nothing too complicated. There are plenty of tutorials on the web, and even some on <a href="http://www.createblog.com" target="_blank">CreateBlog</a> too. <p>This layout was tested in both Internet Explorer and Firefox. In Firefox, the font of the text will be slightly different. Other than that, it works perfectly fine, <u>compatible in both browsers</u>. ^^ Oh, and it works in all resolutions too. :) Hope you enjoy it!</p> <p><b>bold text</b>, <i>italic text</i>, <u>underlined text</u>, <a href="#">a link</a></p> <h1>Header Title Goes Here</h1> <p>content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</p> <p>content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</p> <p>content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</p> </div> </body> </html>
Reason for edit: please put codes in codeboxes. thanks :) -natalia
|
|
|
|
 |
Replies
|
Nov 2 2008, 07:08 PM
Post
#2
|
|
 Senior Member Group: Administrator Posts: 8,629 Joined: Jan 2007 Member No: 498,468 |
Topic Closed & Moved
|
|
|
|
Posts in this topic
dreamgurl36 A Problem With FF and IE Compatibility Oct 31 2008, 12:26 PM
fixtatik your navigation styling:
CODE#navigation {
width... Nov 1 2008, 07:43 AM
dreamgurl36 QUOTE(fixtatik @ Nov 1 2008, 07:43 PM) yo... Nov 1 2008, 03:38 PM fixtatik ooh, gotcha. to do that, you still don't need ... Nov 2 2008, 12:13 PM dreamgurl36 Thank you very much! It works now! Nov 2 2008, 01:34 PM |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: