|
CSS - Positioning Differnent On Different Browsers
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. Similar TutorialsJust 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?? i 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! 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. 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! 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. 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;
}
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. I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Hi, targeting both IE and FF i seem to experience compatibility issues ... The CSS design on IE looks perfect, but same JSPs on FF gives a little bit of dull on colors (or fade) ... I also found some strange behavior in FF on my struts application which i don;t see when testing on EE. Sometimes a page reloads itself on submit... Any issues around this? Oh, i know blinking text is not adviced, but can't seem to get it to work either (using CSS text-decoration : blink) Thanks for your help My web site (URL address blocked: See forum rules) is causing me problems with CSS since I have reworked it. If you look at my web pages in Internet Explorer they look perfect. In Firefox when loading some of the pages the top logo blinks and takes a few seconds to load. In Opera some pages move slightly to the right. I know the problem is related to the length of the center div but I have no idea how to fix this unless I make the small centers longer. Also my previous version of this site just used one image. Logo.gif was in the background. I have put Logo.gif in the header and have used GREEN.jpg as my background now. MY CSS body { background-image: url(../images/GREEN.jpg); } div.container { position: relative; margin: 0 auto; width: 746px; height: 840px; } #header { height: 100px; width: 746px; background-image: url(../images/Logo.gif); background-repeat: no-repeat; background-position: 50% 0%; } #nav { position: absolute; top: 110px; left: 55px; height: 20px; width: 640px; } #left { position: absolute; top: 160px; left: 0px; width: 124px; } #center { position: absolute; top: 160px; left: 130px; width: 441px; height: auto; border: solid; } /* right div at this time has been made invisible. Maybe later add Flash content*/ #right { position: absolute; top: 160px; left: 600px; width: 130px; height: 100px; } /* this div belongs on photo pages and shows the alphabet on the right.Takes place of right div */ #navalpha { position: absolute; top: 160px; left: 600px; width: 100px; height: 130px; font-family: "Courier New", Courier, monospace; border: solid; } /* Start of Top Menu*/ ul { list-style: none; margin: 0; padding: 0; font-size: .95em; } ul li { float: left; margin: 0; padding: 0; } ul li a { color: #777; display: block; text-align: center; text-decoration: none; width: auto; padding: 3px 5px 3px 5px; border-color: #191970; border-width: 1px 1px 1px 0; border-style: solid; } ul li.first a { border-width: 1px; } ul li a:hover { background-color: Fuchsia; color: Yellow; } /* end of Top Menu*/ /* start of side Menu*/ ul#navlist { width: 102px; padding: 0px; margin: 0px; border-left: thin solid Black; font-size: .95em; float: left; } ul#navlist li { list-style: none; margin: 0px; border: 0px; } ul#navlist li a { color: #777; width: 102px; padding: 2px 8px 2px 8px; border-color: #191970; border-width: 0px 1px 1px 0; border-style: solid; text-decoration: none; text-align: left; } ul#navlist li.topfirst a { border-top: 1px solid Black; } ul#navlist li a:link { color: Blue; } ul#navlist li a:hover { border-color: #191970; color: Red; background: Yellow; } ul#navlist li a:visited { color: Blue; } /* end of side Menu*/ p { text-align: left; margin: 0 10px 0 10px; } h1 { font-size: 1.05em; color: Navy; text-decoration: underline; font-style: italic; font-weight: bold; font-variant: small-caps; padding: 0px 0 6px 19px; border-bottom: 1px dashed navy; background: url(cube.gif) no-repeat 0 2px; margin: 0 10px 0 10px; } h2 { font-size: 1em; color: Navy; text-decoration: underline; font-style: italic; font-weight: bold; font-variant: small-caps; margin: 0 10px 0 10px; } h3 { font-size: .9em; color: Navy; text-decoration: underline; font-style: italic; font-weight: bold; font-variant: small-caps; margin: 0 10px 0 10px; } a:link { color: #0000FF; text-decoration: none; } a:visited { color: #0000FF; text-decoration: none; } a:hover { color: Red; text-decoration: none; } a:active { text-decoration: none; } /* ....................thumbnail determines how the small photos look */ .thumbnail { float: left; width: 83px; height: 115px; border: 1px solid #999; margin: 0px 15px 5px 0; padding: 5px; } /* .................thumbnailUnitBoard determines how the photos look on Unit Board page */ .thumbnailUnitBoard { float: left; width: 220px; margin: 0px 15px 15px 0; padding: 5px; } I have a three column (25% - 50% - 25%) page layout via CSS which works perfect in IE. But it does not work in Firefox. Here is my CSS code. #leftColumn { float:left; width:25%; margin: 5px 3px 0px; padding: 0; } * html #leftColumn { width:25%; } #rightColumn { float:right; width:25%; margin: 5px 2px 0px 3px; padding: 0; } * html #rightColumn { width:25%; } #main3Column { margin:5px 25% 5px 25%; padding: 0; /* 50% or auto or no width does not work in IE. 100% here is the remaining of the available after left and right columns */ width:100%; } The ID 'main3Column' is for the middle column. Width: 100% works fine in IE as it excludes 25% for left and 25% for right and 100% of whatever remaining for the middle column. But in Firefox, middle column is taking 100% of the screen width instead of the remaining after left and right columns. Is it possible to come up with a code which works for both IE and CSS ? Please help. I have been searching/googling and whilst i have found people saying there is a difference in how browsers (IE, FF etc) display fonts, i have yet to find an answer that works. I have tried the giving body tag "font-size 100%;" method but it doesnt work... some people have said to use px as disabled people will probably override this with their own stylesheets... Hi all, I seem to be stumped on something that is probably simple. At this test site you'll notice the left nav area as well as the text content area. I am trying to set it up so that both are 6 pixels below the header image. Obviously, then they would be even with each other. Everything I've tried has come close but never right in both FF & IE. Could someone please give me a hand with this? Thanks! Chris I have a small box displayed at the top of the page for an "anouncment column". Opera and IE show it properly, sort of, and NEtscape/mozilla show it further down the page. I want it to be at the VERY top of the page, IE/Opera show it a few px down and mozilla/netscape show it a good 10+ down. I have tried playing with padding and it made no difference. These browsers are the new versions. any ideas? Code: <div style="position: absolute; left: 617px; top; 0px; width: 147px; height: 30px; background-color: transperant; padding: 0px;"> <h5>text is here</h5> </div> the style sheet Code: body {
color: #000000;
background-color: #ffffff;
font-family: Georgia, "Times New Roman",
Times, serif;
}
}
h1 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 30px }
h2 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 25px }
h3
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 20px }
h4
{
FONT-WEIGHT: normal;
text-align: center;
font-size: 15px }
h5
{
padding: 0px;
FONT-WEIGHT: normal;
text-align: center;
font-size: 12px }
h6
{
FONT-WEIGHT: normal;
text-align: center;
font-size: 9px }
p {
FONT-WEIGHT: normal;
text-align: left;
FONT-WEIGHT: normal;
color: #000000;
font-size: 12px }
hr {color: #7d7c7c }
.right {text-align: right }
.center {text-align: center }
.left {text-align: left }
.uppercase {text-transform: uppercase}
.lowercase {text-transform: lowercase}
.capitalize {text-transform: capitalize}
A:visited {
COLOR: #802CFF; TEXT-DECORATION: underline
}
A:link {
COLOR: #2C31FF; TEXT-DECORATION: none
}
A:hover {
COLOR: #719FFE; TEXT-DECORATION: underline
}
A:active {
COLOR: #2C31FF; TEXT-DECORATION: underline
}
Hi, I have been thinking about this cross browser problem. Is there a list of things that FireFox can do and IE can't (plus other browsers) in CSS. It would be great if somewhere on the net there would be a list of these things so i could use it as a cross refferance. . At the mo i just use trial and error but th\at means spending hours to get designs just right Thanks I'm in the process of revamping my website and am trying to use css to position things. I've used browsershots to view what the website looks like in different browsers and platforms. All is well with one exception, IE6! Grrr. Now I'm a total css newbie so what I'm doing wrong is probably painfully obvious to you guys, but I've been beating my head against this for a while now and would appreciate it if someone could take a look over my shoulder and see if they can spot the problem. If you use IE6 you'll notice that the featured products are listed below the last 'service ad' image instead of at the top of that 'column' even with the first 'serivce ad' image. Again, any help in diagnosing/fixing this issue is greatly appreciated! Here's a link to the page: http://www.decaldepot.net/zencart/index.php Hi all, I have several CSS files to look after different browsers, but I use javascript to match the IE css with IE browsers, etc. Can you only have one CSS file that looks after ALL browsers? So that if the user doesn't have javascript it's not a problem? I've heard of css hacks and css filters being used but I'm not all that familiar. Ben I've been having a hard time with browser compatibility and I need a bit of help. This is what I'm trying to acheive. It's a link bar on top and then a page that contains left and right headers, dividers and content plus a footer (height is not an issue right now). I would like the #page to have a 2px border and every element inside to have a white 2px padding. It seems that in IE, if I set #page with a 2px padding, I get exactly what I want but Firefox does not interpret it the same way. Is there a hack/workaround for this. I've attacned a picture of what I'm trying to get at. Thanks 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/html; charset=ISO-8859-1" />
<style type="text/css"><!--
html, body {
margin:0;
padding:0;
height:100%;
}
div {
margin:0;
padding:0;
}
div#holder {
margin:auto;
margin:auto;
width:800px;
height:100%;
background:black;
}
div#links {
width:auto;
height:30px;
background:pink;
}
div#page {
width:auto;
height:100%;
background:white;
border:2px black solid;
padding:2px;
}
div#left {
float:left;
background:red;
width:180px;
}
div#right {
float:right;
background:blue;
width:610px;
}
div#footer {
clear:both;
width:auto;
height:30px;
background:green;
}
--/></style>
</head>
<body>
<div id="holder">
<div id="links">1</div>
<div id="page">
<div id="header">
<div id="left">1</div>
<div id="right">1</div>
</div>
<div id="divider">
<div id="left">1</div>
<div id="right">1</div>
</div>
<div id="content">
<div id="left">1</div>
<div id="right">1</div>
</div>
<div id="footer">1</div>
</div>
</div>
</body>
</html>
good day looking for some css that is compeltely compatable among all major browsers.. namely firefox, ie, safari, and opera.. i've been searching all over the net and forums for css, but cant find any.. i just want a simple 3 column layout, with the middle column being auto width, and left and right fixed width.. can someone point me in the right direct? |
|||||||