|
CSS - Layout In Firefox Perfect, Ie Its Messed Up? :@
Hi, im just getting into CSS, and decided to convert my website from HTML w/ Tabkes to CSS , for smaller load times, make it more professional.. My problem is, I just finished and it looks fine under Firefox (Linux & Windows).. But it looks absolutely horrible in IE? Can anyone find an mistake. I validated the CSS with W3's validater thing.
http://mp3realm.org/new/index.php (First one) http://mp3realm.org/new/search.php (search page) http://mp3realm.org/new/default.css (CSS) Thanks. Similar Tutorialshttp://www.lovemeforme.org/test/index.html works perfect in FF, but in IE, the sidebar is further down than I want. How do I fix this? Ie is driving me nuts, well I'm coding this web page and it looks perfect so far in firefox, but it looks messed up in IE http://drowninginmytears.org/store/blah.html thats the link.. i want it to look how it is in firefox in IE, but I'm not sure how.. this is my css: Code: body
{
margin: 0px auto;
background-color: #BFD1E1;
text-align: center;
padding: 0px;
background-position: top;
}
#wrap
{
position: relative;
margin: 0 auto;
text-align: left;
width: 679px;
}
#hearts
{
background-image: url(hearts.jpg);
height: 44px;
width: 43px;
position: absolute;
margin-left: 490px;
}
#girl
{
background-image: url(girl.jpg);
margin-top: 190px;
height: 358px;
width: 142px;
margin-left: 10px;
}
h4 {
font-family: Arial, verdana, tahoma;
text-transform: uppercase;
font-size: 1.0em;
text-align: right;
font-weight: bold;
color: #5886B2;
letter-spacing: 0px;
padding: 10px 20px 0px 0px;
margin: 0;
}
h5 {
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.7em;
text-align: right;
line-height: 5px;
font-weight: bold;
color: #C3D4E3;
letter-spacing: 3px;
padding-right: 17px;
margin: 0;
}
#navigation
{
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.54em;
text-align: left;
font-weight: bold;
color: #769DBF;
letter-spacing: 1px;
margin-top: 25px;
margin-left: 20px;
position: absolute;
}
#toptitle
{
background-position:top;
height: auto;
width: 768px;
background-image: url(bg.jpg);
padding: 0px;
margin: 0px;
}
#blueline
{
height: 6px;
width: 752px;
background-color: #D8E8F8;
margin-top: 8px;
margin-left: 8px;
margin-right: 0px;
position: absolute;
}
#headerimage
{
height: 173px;
width: 752px;
background-image: url(main.jpg);
margin-top: 15px;
margin-left: 8px;
position: absolute;
}
#main {
margin-top: 100px;
width: 768px;
margin: 20px 0;
margin-left:40px;
display: inline;
}
#header
{
background-image: url(top.jpg);
vertical-align: bottom;
height: 10px;
width: 768px;
margin-top: 20px;
padding: 0px;
}
#bottom
{
background-image: url(bottom.jpg);
vertical-align: bottom;
height: 17px;
width: 768px;
margin-top: 0px;
padding: 0px;
}
p
{
text-align: justify;
color: #555;
margin-top: 0px;
margin-bottom: 9px;
}
.caps
{
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
ol
{
margin: 0;
padding: 0;
}
ul, li
{
color: #666;
list-style-type: none;
border: 0;
margin: 0;
padding: 0;
}
a:link, a:visited
{
color: #FA65CD;
text-decoration: none;
}
a:hover
{
color: #FD92E0;
}
a:active
{
color: #FB7FD7;
}
#container
{
position: relative;
margin: 0 auto;
text-align: left;
background: url(bgfront.gif) repeat-y;
width: 679px;
}
#content
{
padding: 28px 20px 0 20px;
min-height: 200px;
}
can anyone help? thanks! <body> <div id="wrapper" style=" vertical-align:middle;"> <div id="border-top"> <div id="border-left"> <div id="border-right"> <div id="border-bottom"> </div> </div> </div> </div> </div> </body> body { background-color:#5E362C; margin: 0 0 0 0; } #wrapper { width: 828px; height: 558px; position:relative; left: 50%; margin-left:-414px; } #border-top { background-image: url(../Webdesign/MIRAGE services1_r2_c2.jpg); background-position:top left; background-repeat:no-repeat; width: 828px; height: 558px; } #border-left { background-image: url(../Webdesign/MIRAGE services1_r3_c2.jpg); background-position:top left; background-repeat:no-repeat; width: 828px; height: 558px; margin-top:20px; } #border-right { background-image: url(../Webdesign/MIRAGE services1_r3_c18.jpg); background-position:top right; background-repeat:repeat-y; width: 828px; height: 557px; margin-top:-20px; margin-bottom:20px; } #border-bottom { background-image: url(../Webdesign/MIRAGE services1_r10_c3.jpg); background-position:bottom right; background-repeat:no-repeat; width: 828px; height: 558px; margin-top:-1px; } Thanks for the help ! Hello everyone. I have been working on a redesign of my current website for a while. Early on, I realized that the design was flawed for I.E. (I use Firefox on a regular basis for testing). I went ahead and just finished the design anyway, using Firefox to test. Now that it's done, I'm hoping that there's some stupid error in my CSS that's causing the problems, and hoping that someone can find the problem. If it's a big problem and alot of work to fix, I'm willing to pay someone to help me correct the issue. The main problem is my navigation bar at the top, which consists of drop-down menus. There's also a problem with how the background lines up. If you want to see what I'm talking about, go look at the site both in Firefox and I.E. The URL is: http://www.favillephoto.com/new website/index.html I have 2 different css files. One for my index page, because it is designed differently and has a sidebar. And then a second one for the rest of my pages on the site. I'll attach the CSS for both, in case there's an issue there. Thanks in advance for your help. This is the css file for my index page: Code: body {
padding: 0;
background: #ffffff url('images/img01.jpg');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
color: #AD1112;
}
h1 {
font-size: 250%;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 140%;
font-weight: bold;
}
h4 {
font-size: 100%;
font-weight: bold;
}
p, ol, ul {
line-height: 180%;
}
p {
}
ol {
}
ul {
}
blockquote {
margin: 0;
padding-left: 20px;
font-style: italic;
}
blockquote * {
line-height: normal;
}
a {
color: #1267bc;
}
a:hover {
color: #999999;
}
img {
border: none;
}
img.left {
float: left;
margin: 10px 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
hr {
display: none;
}
/* Header */
#header {
width: 1030px;
height: 260px;
margin: 0 auto;
background: url('images/img02.jpg') no-repeat right top;
}
/* Menu */
#menu {
float: right;
width: 1030px;
height: 40px;
padding: 220px 0 0 0;
}
#menu a {
display: block;
height: 32px;
background: url('images/img06.gif') no-repeat;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}
#menu ul {
width: 1026px;
height: 40px;
margin: 0;
padding: 0;
background: #AD1011 url('images/img05.jpg') repeat-x;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
list-style-type:none
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#menu li a:hover
{ color: #123456;}
#menu div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #000000;
}
#menu div a
{ position: relative;
display: block;
margin: 0;
padding: 3px 10px;
width: auto;
height: 20px;
white-space: nowrap;
text-align: left;
background: #6c91c5;
color: #ffffff;}
#menu div a:hover
{ color: #123456;}
/* Page */
#page {
width: 1030px;
margin: 0 auto;
}
/* Content */
#content {
float: left;
width: 760px;
height: 2040px;
padding: 20px;
background: #FFFFFF url('images/img07.gif') no-repeat left bottom;
}
/* Sidebar */
#sidebar {
float: right;
width: 220px;
height: 2070px;
padding-top: 10px;
padding-right: 10px;
background: #ffffff url('images/img07a.gif') no-repeat right bottom;
}
#sidebar a {
color: #dddddd;
}
#sidebar a:hover {
color: #999999;
text-decoration: underline;
}
#sidebar ul {
margin-left: 0;
padding-left: 0;
list-style: none;
font-size: 92%;
}
#sidebar ul li {
background: url('images/img13.gif') no-repeat 0px 12px;
border-top: 1px solid #0B0B0B; padding-left:14px; padding-right:14px; padding-top:5px; padding-bottom:5px
}
#sidebar ul li.first {
border: none;
}
#sidebar ul li h2 {
margin: 0;
font-size: 100%;
}
#sidebar ul li h3 {
margin: 0;
font-size: 92%;
}
#sidebar ul li p {
color: #dddddd;
margin: 0;
}
#sidebar p {
color: #dddddd;
margin: 0;
font-size: 92%;
}
.boxed {
margin-bottom: 10px;
background: #113c5c url('images/img10.gif') no-repeat left bottom;
}
.boxed .title {
height: 30px;
margin: 0;
background: #000000 url('images/img08.jpg') no-repeat;
font-size: 16px;
font-weight: bold;
color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}
.boxed .content {
padding: 15px;
background: url('images/img09.gif') repeat-x;
}
.boxedPrintoftheMonth {
margin-left: -790px;
background: #113c5c url('images/img10PotM.gif') no-repeat left bottom;
}
.boxedPrintoftheMonth .title {
height: 30px;
margin: 0;
background: #000000 url('images/img08PotM.jpg') no-repeat;
font-size: 16px;
font-weight: bold;
color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}
.boxedPrintoftheMonth .content {
padding: 15px;
background: url('images/img09.gif') repeat-x;
}
/* Footer */
#footer p {
margin: 0;
line-height: normal;
font-size: 85%;
color: #000000;
}
#footer a {
color: #000000;
}
#footer a:hover {
color: #666666;
}
This is the css for the rest of my pages: Code:
body {
padding: 0;
background: #ffffff url('images/img01.jpg');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
color: #AD1112;
}
h1 {
font-size: 250%;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 140%;
font-weight: bold;
}
h4 {
font-size: 100%;
font-weight: bold;
}
p, ol, ul {
line-height: 180%;
}
p {
}
ol {
}
ul {
}
blockquote {
margin: 0;
padding-left: 20px;
font-style: italic;
}
blockquote * {
line-height: normal;
}
a {
color: #1267bc;
}
a:hover {
color: #999999;
}
img {
border: none;
}
img.left {
float: left;
margin: 10px 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
img.left1 {
float: left;
margin: 0 70px 0 70px;
}
img.right1 {
float: right;
margin: 0 70px 0 70px;
}
img.left2 {
float: left;
margin: 20px 100px 20px 100px;
}
img.right2 {
float: right;
margin: 30px 120px 20px 120px;
}
img.left3 {
float: left;
margin: 0 110px 0 110px;
}
img.right3 {
float: right;
margin: 20px 60px 0 60px;
}
hr {
display: none;
}
/* Header */
#header {
width: 1030px;
height: 260px;
margin: 0 auto;
background: url('images/img02.jpg') no-repeat right top;
}
/* Menu */
#menu {
float: right;
width: 1030px;
height: 40px;
padding: 220px 0 0 0;
}
#menu a {
display: block;
height: 32px;
background: url('images/img06.gif') no-repeat;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}
#menu ul {
width: 1026px;
height: 40px;
margin: 0;
padding: 0;
background: #AD1011 url('images/img05.jpg') repeat-x;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
list-style-type:none
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#menu li a:hover
{ color: #123456;}
#menu div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #000000;
}
#menu div a
{ position: relative;
display: block;
margin: 0;
padding: 3px 10px;
width: auto;
height: 20px;
white-space: nowrap;
text-align: left;
background: #6c91c5;
color: #ffffff;}
#menu div a:hover
{ color: #123456;}
/* Page */
#page {
width: 1030px;
margin: 0 auto;
}
/* Content */
#content {
float: left;
width: 990px;
padding: 20px;
background: #FFFFFF url('images/img07b.gif') no-repeat left bottom;
}
/* Footer */
#footer p {
margin: 0;
line-height: normal;
font-size: 85%;
color: #000000;
}
#footer a {
color: #000000;
}
#footer a:hover {
color: #666666;
}
hey i am new in developing sites with css codes so i started coding my home page with all the css code that was required and when half the page was done i checked it in the browser. so it looks good in firefox but it looks messed up in IE. So please suggest me something to fix my problems. I am using Dreamweaver to develop my site. Hey Folks, I am a newbie with designing webpages and having some problems with a website that I just created. If any of you could point to a resource of help me out, that be great. Heres the link www.pcdigger.com The middle part is messed up in firefox. HTML and CSS both are validated per www.w3.org but I guess, that doesnt do anything for firefox. Thanks, DesignFlaw I'm having some issues with an info form for a website I'm coding. The form uses CSS, and looks just fine in Firefox, but in IE part of it is messed up. http://www.blanchetrocker.com/contactus There's the URL. I really appreciate any tips and fixes. Ok so this is probably really basic but I'm tearing my hair out. the page is http://fireshui.com/about.php the css is http://fireshui.com/global/styles2.css I used to use the bigtitle class for headers (you can see an example of this at http://fireshui.com/mtglinks.php). One day I looked in IE and it wasn't showing up right. So I decided to change it to the proper way of using h1, h2, etc. In Firefox, the size for h1 is right - it's 110% of the normal text. In IE, it's really huge, which I don't want. On a side note, if you checked out http://fireshui.com/mtglinks.php, why exactly is the bigtitle class not working? I used to use fixed sizes before I found out they were bad, the old css is at http://fireshui.com/global/styles.css, and that doesn't work either. This is all hugely confusing. Thanks for any help you can offer!! :-) Oh, to say I'm gutted is under-rated, I thought I had mastered what is CSS design for one of my sites, that was until I decided to test it at work on FireFox, Netscape and Mozilla. For a start the content isn't in the center of the page, and some of the div's seem to be constrained into the right hand column, not sure why. The page looks perfect in IE. But messed up in the others, I am kicking myself I have left it so late to check. If any very nice person/people can help me sort this out I would be sooo happy, especially if I can understand why it is so messed up. I'm not really that technical, I'm a graphic designer so if you can help, keep it fairly simple please. The link is: http://www.gladiatorszone.co.uk/main_new1.shtml I think it might be a position element wrong or a float? Hi, I'm having a problem with a layout in Firefox. http://26990.vws.magma.ca/press-room.cfm As you can see the content area is all shifted down and lines up with a block in the menu. It doesn't do this in IE and I need it to work the same way in Firefox. Can anyone offer some suggestions as to what I can change to get it to work? I've been working with this issue for the better part of the day, and I think whatever the issue is, is one I'm not seeing because I've been doing just that. So I'm hoping to get a little guidance from those of you who're far superior to me in the world of CSS. On this site ianrobinett.com/designwork/SAMPO/Sitev1/ I've been working on, in Mozilla, the fullwidth div I put below my other divs (in the main body content area), is appearing off to the right of the Twitter widget. In Chrome and IE, funny enough, it's right, and it's Mozilla having the fit. I honestly figure this is something small, and something I'm just missing because I've been looking at the code all day. http://925-sterling-silver-jewelry....udes/header.php well this is my first proper CSS based site but i am having troubles with it. the problem is that in IE the div (main) starts near to the sidebar div, wheras in firefox it starts a bit further away! also at the moment the links at the bottom dont appear in IE but do in FF albeit little messed up. help please? the web page contains the following contents PHP Code: <body> <?php include("1banner.php");?> <div id="frame"> <div id="contentleft"><?php include("1links.php");?></div> <div id="contentcenter"> <div class="heading-main" align="center" ><p>Code/Script Writing</p><br></div> </div> <?php include ("1footer.php");?> </div> </body> the footer page should display at last but it display at top of the page i couldn't find error in CSS and page. This page is displaying properly in IE and problem is only in Firefox. Thanks in advance for help. the CSS used here is Code:
#contentleft {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 11px;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
WIDTH: 233px;
PADDING-TOP: 0px;
FONT-FAMILY: Arial,Helvetica,sans-serif;
}
#contentcenter {
FLOAT: right;
MARGIN: 0px;
WIDTH: 542px;
}
#content250{
MARGIN: 4px 2px 0px 3px;
WIDTH: 252px;
TEXT-ALIGN: left;
float: left;
}
#content250a{
MARGIN: 4px 3px 0px 2px;
WIDTH: 252px;
TEXT-ALIGN: left;
float: right;
}
#conteninbuilt {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND: #ffffff;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
WIDTH: 255px;
PADDING-TOP: 0px;
FONT-FAMILY: Arial,Helvetica,sans-serif;
border: 1px solid #CC6600;
}
#frame {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px auto;
WIDTH: 775px;
PADDING-TOP: 0px;
TEXT-ALIGN: left;
border: 1px solid #333366;
background-image: url(../box-bg/body_left_color.gif);
background-repeat: repeat-y;
}
#sitemap {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px auto;
WIDTH: 775px;
PADDING-TOP: 0px;
TEXT-ALIGN: left;
border: 1px solid #333366;
}
.bg1 {
background-image: url(../box-bg/body_left_color.gif);
}
.bg-webname {
background-image: url("../images-new/web-name-bg.jpg");
}
.bg-v-boarder {
background-image: url(../box-bg/bg_dots.jpg);
background-repeat: repeat-y;
background-position: 5px;
}
.bg-h-boarder {
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
border-bottom-width: 2px;
border-bottom-style: dotted;
}
.bg5 {
background-color: #006633;
}
.banner-offer-ad {
background-image: url("../images-new/free-offer.gif");
}
.bg-banner {
background-image: url(../box-bg/bg_banner.jpg);
background-repeat: repeat-y;
}
.boarder-1px-blue {
border: 1px solid #3333FF;
margin-top: 5px;
margin-bottom: 5px;
}
.boarder1 {
border: 1px solid #990000;
}
.boarder2 {
border: 2px solid #333399;
}
.boarder3 {
border: 1px solid #FF6633;
}
.bullet1-links {
background-image: url(../box-bg/bullet.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333399;
font-weight: bold;
background-position: 3px 8px;
padding-left: 22px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999999;
margin-top: 5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 10px;
width: 200px;
}
.bullet2-links-sub {
background-image: url(../box-bg/circle1.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #3366CC;
font-weight: bold;
background-position: 15px 2px;
padding-left: 40px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999999;
margin-top: 5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 10px;
}
.bullet3-content {
background-image: url(../box-bg/bullet3.gif);
background-repeat: no-repeat;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
font-weight: normal;
background-position: 10px 5px;
padding-left: 20px;
padding-top: 0px;
padding-bottom: 1px;
margin-top: 0px;
margin-bottom: 0px;
line-height: 15px;
}
.contact-photo {
background-image: url("../images-new/web_title_ad_welcome_page.jpg");
background-repeat: no-repeat;
background-position: right center;
}
.heading-main {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 160%;
color: #333366;
font-weight: bold;
margin-top: 10px;
margin-bottom: 0px;
}
.heading-sub1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding-bottom: 5px;
margin-bottom: 1px;
color: #666600;
margin-top: 5px;
}
.heading-sub2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-right: 5px;
margin-left: 5px;
}
.links-menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #006699;
background-image: url(../box-bg/circle1.gif);
}
.margin-5px {
margin-top: 5px;
margin-bottom: 5px;
}
.margin1 {
border: 1px solid #333399;
padding: 20px;
margin: 2px;
}
.margin2 {
margin: 1px;
padding: 2px;
border: 1px solid #003333;
}
.margin3 {
margin: 5px;
}
.text-normal {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 22px;
margin: 1px 5px;
color: #333333;
}
.text-normal-left-margin {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
margin: 0px 0px 0px 10px;
color: #666666;
}
.webname {
background-image: url("../images-new/web_name.jpg");
background-repeat: no-repeat;
background-position: left center;
}
.bg-security {
background-color: #FFCC00;
}
#navigation a
{
color: #006633;
background: #ffffff url(../box-bg/bg-1left-cornor.gif) no-repeat left top;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 40px;
margin: 10px;
padding: 1px 10px 10px 0px;
}
#navigation a span
{
background: url(../box-bg/bg-2right-cornor.gif) no-repeat right top;
padding: 1px 0px 10px 20px;
}
.box-light-blue {
background-color: #E9F7FE;
width: 300px;
border: 1px solid #333399;
}
.footer {
background-image: url(../box-bg/bottom_back.gif);
height: 30px;
width: 775px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #003399;
border-bottom-color: #003366;
background-repeat: repeat-x;
background-position: bottom;
}
.heading-sub3 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13pt;
color: #333399;
font-weight: bold;
margin-top: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
.heading-sub4 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
padding-bottom: 5px;
margin-bottom: 1px;
color: #993300;
margin-top: 5px;
}
.float-right {
float: right;
margin-bottom: 5px;
margin-left: 5px;
}
.bullet4 {
background-image: url(../box-bg/bullet4.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #AE337A;
font-weight: bold;
background-position: 0px 0px;
padding-left: 35px;
margin-left: 10px;
padding-top: 0px;
line-height: 30px;
}
.bullet5 {
background-image: url(../box-bg/bullet5.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #003399;
font-weight: bold;
background-position: 0px 11px;
padding-left: 15px;
margin-left: 10px;
line-height: 10px;
}
.heading-sub5 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #333399;
font-weight: bold;
margin-top: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
Here's my problem. I was stupid enough to do my layout for a page I'm making in Firefox, but didn't look at IE until I was done. IE is rendering the whole thing completely off. I was wondering if anyone might be able to help me reconcile the two layouts? Here's the CSS: Code: body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #ccc;
background-color: #3C3C3C;
text-align: center;
}
img {
border: 0;
}
abbr, acronym, .help {
border-bottom: 1px dotted #333;
cursor: help;
}
#container {
padding-top: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background: url(images/background.png) repeat-y;
border: 0px;
text-align: left;
width: 685px;
}
#menu {
float: right;
z-index: 9;
margin-right: -44px;
}
#content {
border: 10px solid #5B5B5B;
background: #FFF;
width: 661px;
font-size: 12px;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 2px;
font-family: tahoma, verdana, san-serif;
}
.content-right {
float: right;
width: 70%;
}
.content-left {
width: 32%;
}
h1#primary {
position:relative;
z-index: 10;
background: url(images/header-1.png) top left no-repeat;
width: 685px;
height: 35px;
margin-top: 26px;
margin-bottom: 0px;
margin-left: 20px;
text-indent: -9999px;
}
h2#homeprofile {
background: url(images/homeprofile.png) top left no-repeat;
width: 105px;
height: 20px;
margin-top: 15px;
margin-bottom: 5px;
margin-left: 14px;
text-indent: -9999px;
}
h2#featured {
background: url(images/featured.png) top left no-repeat;
width: 167px;
height: 21px;
margin-top: 5px;
margin-bottom: 10px;
margin-left: 14px;
text-indent: -9999px;
}
h2#realtor {
background: url(images/realtor.png) top left no-repeat;
width: 161px;
height: 20px;
margin-top: 35px;
margin-bottom: 10px;
margin-left: 14px;
text-indent: -9999px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
#content ul li {
padding-left: 20px;
margin-left: 25px;
margin-bottom: 3px;
margin-top: 5px;
background-image: url(images/bullet.gif);
background-repeat: no-repeat;
background-position: center left;
font-size: 12px;
color: #7D8381;
}
.content-intro {
font-size: 12px;
color: red;
font-weight: bold;
}
#featured-pic {
margin-left: 15px;
margin-right: 10px;
}
p.homeprofile-txt, p.realtor-txt, p.featured-txt {
font-size: 12px;
color: #7D8381;
margin-top: 5px;
margin-left: 15px;
margin-right: 10px;
}
a:link, a:visited {
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}
a:hover, a:active {
color: #343F51;
text-decoration: none;
border-bottom: 1px dotted black;
}
img.featured-pic, img.realtor-pic {
margin-left: 14px;
}
Here's the HTML: 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" xml:lang="en" lang="en">
<head>
<title>Our Home</title>
<style type="text/css" media="all">@import url("style.css");</style>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv= "pragma" content="no-cache" />
<meta name="robots" content="all" />
</head>
<body>
<div id="container">
<div id="menu"><img src="images/imagemap.gif"></div>
<h1 id="primary">Country Living</h1>
<div id="content">
<div class="content-right">
<h2 id="featured">Feature Presentation</h2>
<img id="featured-pic" src="images/featured-thumb.png" align="left" width="124px" height="92px" />
<p class="featured-txt"><span class="content-intro">Please browse our image gallery</span>, where you will find a complete tour of the house, including the kitchen, bedrooms, dining room, and more! Upon loading the gallery, you can choose a new picture simply by clicking on it. Move to the next page by clicking the arrows. <a href="/gallery/public_html/">see the gallery</a></p>
<h2 id="realtor">Realtor Information</h2>
<img id="featured-pic" src="images/realtor-thumb.png" align="left" width="124px" height="92px" />
<p class="realtor-txt"><span class="content-intro">Call our realtor</span> to set up a showing of our home! Full information is provided to contact *******************. <a href="#">see the info</a></p>
</div>
<div class="content-left">
<h2 id="homeprofile">Home Profile</h2>
<p class="homeprofile-txt"><span class="content-intro">The home at ******************* Road</span> sits on three acres of well-manicured lawn. Just made for those beautiful ****** evenings, you'll find both the front porch and back patio providing beautiful vistas for the eye, best enjoyed with a cool glass of iced tea.</p>
<p class="homeprofile-txt">Completely remodeled within the last year, this house is ready for any family, large or small, to call it home. Here are some of the vital statistics you'll be interested in:</p>
<ul>
<li>Bedrooms: 4</li>
<li>Bathroom: 3.5</li>
<li>Apprx. SqFt: 4824</li>
<li><abbr title="List Price per Square Foot">Lp. SqFt</abbr>: 90.17</li>
<li>Acreage: 3 acres</li>
<li>City: *********</li>
<li>County: *********</li>
<li>Stories: One story</li>
<li>Style: Traditional</li>
<li>
</ul>
<p class="homeprofile-txt">Please look around our site for more information on this prime home. You'll find that we have a gallery complete with pictures from every area of the house, as well as information on our realtor, and directions on how to get the house if you want to get a better idea of the location.</p>
</div>
</div>
</div>
</body>
</html>
Here's a picture of what the problem looks like in IE. Here's a picture of what the problem looks like in Firefox. Well, I'm redesigning my site because the current php management system was thrown together in a hurry just to get it up there. Now I've got time to redo it and I want to do it right. It's a webcomic site. Currently, the site has an XML layout that serves XHTML after a serverside transformation. What I want to do is lay the site out now so I can define my xsl. The basic "gist" of the situation is, i want it to be as accessible as possible(even though blind people may not be able to see the images, they deserve to surf my website.). With that, I want my content to show up before my link area, so they can easily get to the content without listening to a long list of links first. So what I've done in firefox was repositioned the div tags that held the content above the div section that held the link boxes. That's fine and dandy, where's my point? I still want the linkboxes to appear on the lefthand side of the page and the content on the right. In firefox, I used float:right;margin-right:5%; for the content and float:left on the link boxes. It works fine in firefox. The boxes appear on the left and content on the right. However, in IE the content appears on the right, but the link boxes appear on the left of the next line. Here is relelvant code: html Code: Original - html 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> <title>AdrienComix</title> <style type="text/css"> #body{ margin:0; } .header{ margin-bottom:10px; width:100%; height:15%; color:#000000; background-color:#00BBFF; background:url(http://www.adriencomix.com/res/head.jpg); border:1px dashed; text-align:center; font-size:20pt; } .box{ border:1px dashed; margin-bottom:30px; margin-left:2px; padding-left:5px; width:100%; background-color:#00BBFF; color:#000000; } .left{ width:15%; height:85%; float:left; } .content{ width:74.6%; height:100%; margin-left:5%; float:right; padding-right:5%; } .comic{ text-align:center; padding-top:15px; padding-bottom:15px; } .emp{ text-align:center; padding-top:20px; font-size:150%; font-weight:bold; } </style> </head> <body id="body"> <div class="header"><p>AdrienComix</p></div> <div class="content"> <div class="emp">Happy New Year!</div> <div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div> <div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div> <div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div> </div> <div class="left"> <div class="box"> <center><h3>Links</h3></center><br/> <a href="http://www.sluggy.com">Sluggy Freelance</a><br/> <a href="http://www.nuklearpower.com">8-bit Theater</a><br/> <a href="http://www.slackware.com">Slackware Linux</a><br/> <a href="http://www.gnu.org">GNU</a><br/> <a href="http://www.kernel.org">Linux Kernel</a><br/> <a href="http://www.google.com">Google</a> </div> <div class="box"> <center><h3>Archive</h3></center><br/> <a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/> <a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/> <a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/> <a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/> <a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/> <a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/> <a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/> <a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/> <a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/> <a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/> </div> </div> </body> </html>
<!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>
<title>AdrienComix</title>
<style type="text/css">
#body{
margin:0;
}
.header{
margin-bottom:10px;
width:100%;
height:15%;
color:#000000;
background-color:#00BBFF;
background:url(http://www.adriencomix.com/res/head.jpg);
border:1px dashed;
text-align:center;
font-size:20pt;
}
.box{
border:1px dashed;
margin-bottom:30px;
margin-left:2px;
padding-left:5px;
width:100%;
background-color:#00BBFF;
color:#000000;
}
.left{
width:15%;
height:85%;
float:left;
}
.content{
width:74.6%;
height:100%;
margin-left:5%;
float:right;
padding-right:5%;
}
.comic{
text-align:center;
padding-top:15px;
padding-bottom:15px;
}
.emp{
text-align:center;
padding-top:20px;
font-size:150%;
font-weight:bold;
}
</style>
</head>
<body id="body">
<div class="header"><p>AdrienComix</p></div>
<div class="content">
<div class="emp">Happy New Year!</div>
<div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div>
<div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div>
<div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div>
</div>
<div class="left">
<div class="box">
<center><h3>Links</h3></center><br/>
<a href="http://www.sluggy.com">Sluggy Freelance</a><br/>
<a href="http://www.nuklearpower.com">8-bit Theater</a><br/>
<a href="http://www.slackware.com">Slackware Linux</a><br/>
<a href="http://www.gnu.org">GNU</a><br/>
<a href="http://www.kernel.org">Linux Kernel</a><br/>
<a href="http://www.google.com">Google</a>
</div>
<div class="box">
<center><h3>Archive</h3></center><br/>
<a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/>
</div>
</div>
</body>
</html>
Is there any way that I can make it appear on the same line in IE without breaking the layout in firefox and keeping the page accessible? Ok I have been trying to read and search and fiddle - but im getting to my wits end here. Trying a 2 column layout from scratch and in IE it views fine but firefox is not so fine. www.chroma-zone.net css: www.chroma-zone.net/new.css Any idea's? -Thanks hi, I wonder if anyone can help with my layout problems in Firefox, i have tried to have vertically alignment on the whole page, its looks ok in IE but not FF. Im fairly new to CSS so if anyone can spot what i have done wrong that would be great link to layout here thanks I have been pulling my hair out on this one because for the life of me I cannot make it work. Here is my page: www.nova-dataonline.com Notice that in IE, the "Featured Products" section displays nicely and when you mouseover "Cisco Systems" the filler text displays well within the grey box. The entire "Featured Products" section apart from the manufacturer logos, is one image and the mouseover text is padded to appear correctly within the grey box which is part of the image. Now notice in firefox that the entire layout breaks. The div displays much larger than I intended and the padded text does not display correctly. I have found that if I remove the padding from the div containing the background image, the div displays fine, but this leaves me without a way to style the content of the div in the correct place. So it appears that firefox is expanding the div based on the padding here is the relevant markup: PHP Code: <div class="featured" id="feat_1" onmouseover="toggleDiv('feat_1',1)" onmouseout="toggleDiv('feat_1',0)"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. </div> and css: Code:
.featured{
visibility:visible;
width:410px;
height:350px;
position:absolute;
top:250px;
left:340px;
border:1px solid #999999;
border-left:none;
background-repeat:no-repeat;
background-position:center;
background-image:url(images/message/feat.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-style:normal;
padding:102px 27px 29px 29px;
}
#feat_1{visibility:hidden;}
and javascript (if it is even relevant to the problem): PHP Code: <script language="javascript" type="text/javascript"> <!-- function toggleDiv(id,flag) { if (flag == "1") { if (document.layers) document.layers[''+id+''].visibility = "show" else if (document.all) document.all[''+id+''].style.visibility = "visible" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" } if (flag == "0") { if (document.layers) document.layers[''+id+''].visibility = "hide" else if (document.all) document.all[''+id+''].style.visibility = "hidden" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" } } --> </script> any idea? |
|||||||