|
CSS - Css Not Consistent In All Browsers
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; } Similar TutorialsI'm playing around with web development after quite a lengthy break. I wrote the home page out by hand and had attempted to validate, fixed the errors and repeated until it validated at w3.org. When I copied the code from the first page and removed the right side of the table ( it was 3 columns on the main page but I only wanted 2 columns for the "template page" ). When viewing the template page in IE the table is off center ( all the way to the left ) and the links have unwarranted line spaces between them. I can understand removing a column might affect the alignment of a table ( or at least, this is not what I'm worried about so much ) but the alterations to the navigation pane are baffling. Specifically, because the nav pane is inserted by the same php script on both the working, and dysfunctional page. The css is also the same as they are coded to pull from the specified url copy and pasted from one doc to the other as opposed to mistakenly using a css in a different directory than the working one. The working page is: Code: <html> <head> <title> Under Construction </title> <link rel="stylesheet" type="text/css" href="css/pcss.css" id="css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <table class="main"> <tr class="header"> <th class="left"><div id="img"></div></th> <th class="center"><h1 class="MainHeading">Brendan Walton</h1></th> <th class="right"> </th> </tr> <tr class="body"> <td> <div id="navMenu"> <ul class="navlist"> <li> <div class="navhead" onclick='IsOpen(0)'>Literature</div> <ul class="navlist" id="sm0" style="display:block;"> <li><a href="" class="navlink">Guides</a></li> <li><a href="" class="navlink">Web Reference</a></li> <li><a href="" class="navlink">Desktop Reference</a></li> <li><a href="" class="navlink">External Reference</a></li> </ul> </li> <li> <div class="navhead" onclick='IsOpen(1)'>Fun and Random</div> <ul class="navlist" id="sm1" style="display:none;"> <li><a href="" class="navlink">Videos</a></li> <li><a href="" class="navlink">Images</a></li> <li><a href="" class="navlink">Music</a></li> <li><a href="" class="navlink">Random Page</a></li> </ul> </li> <li> <div class="navhead" onclick="IsOpen(2)">Code Base</div> <ul class="navlist" id="sm2" style="display:none;"> <li><a href="code_base_sample2.html" class="navlink">Java</a></li> <li><a href="code_base_sample2.html" class="navlink">C++</a></li> <li><a href="code_base_sample2.html" class="navlink">PHP</a></li> <li><a href="code_base_sample2.html" class="navlink">JavaScript</a></li> </ul> </li> <li><div class="navhead" onclick="IsOpen(3)">General</div> <ul class="navlist" id="sm3" style="display:none;"> <li><a href="" class="navlink">About Us</a></li> <li><a href="" class="navlink">Don't Like the Look?</a></li> <li><a href="" class="navlink">Community</a></li> <li><a href="" class="navlink">Site Map</a></li> </ul> </li> </ul> </div> <div class="navhead" style="height:150px;"><img src="images/stats.jpg" alt="TempStats" /></div> <script type="text/javascript" src="javascript/menuwork.js"></script> </td> <td> <h4 class="heading">Coming Soon!!</h4> <hr class="pagebreak" /> <p class="cblock"> This website will eventually have content, for now, just enjoy the pretty colors and the fancy, interactive menu to the left...</p> <h4 class="heading">Update: April 6, 2010</h4> <hr class="pagebreak" /> <p class="cblock"> I have changed the navigation to the left to reflect the content the site will eventually house. Additionally I have begun styling how the codebase will eventually display it's information. To see a sample of the code output simply click any of the codebase links to the left.</p> <p class="cblock"> On a personal note, it has recently come to my attention that Dom's birthday was actually the second of April, not the fourth. I apologize for the tardy wishes. </p> <h4 class="heading">Update: April 4, 2010</h4> <hr class="pagebreak" /> <p class="cblock"> Still working on the style for the website, It's coming along, albeit slowly... Also, even though you're never going to see this, Happy birthday Dom 8-)</p> </td> <td><img src="images/Brendan.jpg" alt="Brendan" id="portrait" /> <hr style="width:150px;" /> <p class="iblock"> "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." - Martin Golding"</p> <hr style="width:150px;" /> <a href="aboutus.php"> About Us </a> </td> </tr> <tr > <td> </td> <td> <!-- footer removed for containing urls --> </td> <td> </td> </tr> </table> </body> </html> The dysfunctional page is: Code: <!-- XHTML 1.1 --> <!-- Document Start --> <html> <!-- Head --> <head> <!-- Title --> <title> </title> <!-- Style Sheet --> <link rel="stylesheet" type="text/css" href="css/pcss.css" id="css" /> <!-- Charset UTF-8 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- PHP Includes --> </head> <!-- End Includes --> <!-- Body --> <body> <!-- Main Table --> <table class="main"> <!-- First Row - Header --> <tr class="header"> <!-- Start Banner --> <th class="left"><div id="img"></div></th> <th class="center"><h1 class="MainHeading">Brendan Walton</h1></th> <!-- End Banner --> </tr> <!-- End First Row --> <!-- Second Row - Content --> <tr class="body"> <td> <div id="navMenu"> <ul class="navlist"> <li> <div class="navhead" onclick='IsOpen(0)'>Literature</div> <ul class="navlist" id="sm0" style="display:block;"> <li><a href="" class="navlink">Guides</a></li> <li><a href="" class="navlink">Web Reference</a></li> <li><a href="" class="navlink">Desktop Reference</a></li> <li><a href="" class="navlink">External Reference</a></li> </ul> </li> <li> <div class="navhead" onclick='IsOpen(1)'>Fun and Random</div> <ul class="navlist" id="sm1" style="display:none;"> <li><a href="" class="navlink">Videos</a></li> <li><a href="" class="navlink">Images</a></li> <li><a href="" class="navlink">Music</a></li> <li><a href="" class="navlink">Random Page</a></li> </ul> </li> <li> <div class="navhead" onclick="IsOpen(2)">Code Base</div> <ul class="navlist" id="sm2" style="display:none;"> <li><a href="code_base_sample2.html" class="navlink">Java</a></li> <li><a href="code_base_sample2.html" class="navlink">C++</a></li> <li><a href="code_base_sample2.html" class="navlink">PHP</a></li> <li><a href="code_base_sample2.html" class="navlink">JavaScript</a></li> </ul> </li> <li><div class="navhead" onclick="IsOpen(3)">General</div> <ul class="navlist" id="sm3" style="display:none;"> <li><a href="" class="navlink">About Us</a></li> <li><a href="" class="navlink">Don't Like the Look?</a></li> <li><a href="" class="navlink">Community</a></li> <li><a href="" class="navlink">Site Map</a></li> </ul> </li> </ul> </div> <div class="navhead" style="height:150px;"><img src="images/stats.jpg" alt="TempStats" /></div> <script type="text/javascript" src="javascript/menuwork.js"></script> </td> <td> </td> </tr> <!-- End Second Row --> <!-- Third Row - Footer --> <tr> <td> </td> <td> <!-- footer removed for containing urls --> </td> </tr> <!-- End Third Row --> </table> <!-- End Table --> </body> <!-- End Body --> </html> <!-- End Doc --> The css is: Code:
body
{
color:#333333;
background-color:#FFFFFF;
margin:0px;
padding:0px;
}
hr.pagebreak
{
width:450px;
color:#550072;
}
.subHeading
{
color:#8A00B8;
font-size:18px;
}
ul.navlist
{
display:inline;
list-style-type:none;
margin:0px;
padding:0px;
}
a.navlink:link
{
color:#FFFFFF;
background-color:#550072;
display:block;
text-align:right;
text-decoration:none;
font-weight:bold;
margin:0px;
padding-right:2px;
}
a.navlink:visited
{
color:#FFFFFF;
background-color:#550072;
display:block;
text-align:right;
text-decoration:none;
font-weight:bold;
margin:0px;
padding-right:2px;
}
a.navlink:hover
{
color:#FFFFFF;
background-color:#8A00B8;
text-decoration:none;
margin:0px;
padding-right:2px;
}
tr
{
vertical-align:top;
}
table
{
margin-left:auto;
margin-right:auto;
margin-bottom:0;
margin-top:0;
}
table.main
{
background-color:#FFFFFF;
}
th.left
{
width:150px;
}
th.center
{
width:500px;
}
th.right
{
width:150px;
}
a.navhead:link
{
display:block;
text-decoration:none;
text-align:left;
color:#550072;
font-weight:bold;
border-style:groove;
margin:0px;
padding:0px;
}
a.navhead:visited
{
display:block;
text-decoration:none;
text-align:left;
color:#550072;
font-weight:bold;
border-style:groove;
margin:0px;
padding:0px;
}
div.navhead
{
display:block;
text-decoration:none;
text-align:left;
color:#550072;
font-weight:bold;
border-style:groove;
margin:0px;
padding:0px;
}
h4.heading
{
display:block;
margin:0px;
padding-right:30px;
color:#550072;
text-indent:15px;
text-align:right;
font-size:24px;
}
img
{
display:block;
margin:0;
padding:0;
}
p.cblock
{
display:block;
text-indent:15px;
padding-left:10px;
width:475px;
}
p.fblock
{
display:block;
text-indent:15px;
padding-left:10px;
width:475px;
text-align:center;
}
.footer
{
text-align:center;
}
#navMenu
{
height:300px;
}
h1.MainHeading
{
font-size:50px;
color:#550072;
text-align:left;
}
#img
{
background-image:url("../images/purple-150x150-clear.jpg");
background-repeat:no-repeat;
height:150px;
width:150px;
}
img.cssscriptimg
{
display:inline;
}
#portrait
{
width:150px;
}
p.iblock
{
display:block;
text-indent:15px;
padding-left:10px;
width:150px;
}
The navigation script is below: PHP Code: <?php // This is a simple script to insert the navigation pane into every page function echoNav () { // color changer //echo "<img class=\"cssscriptimg\" src=\"images/purple.jpg\" alt=\"purple\" onclick=\"LoadCss(\"purple\")\" />"; //echo "<img class=\"cssscriptimg\" src=\"images/red.jpg\" alt=\"red\" onclick=\"LoadCss(\"red\")\ />"; //echo "<img class=\"cssscriptimg\" src=\"images/green.jpg\" alt=\"green\" onclick=\"LoadCss(\"green\")\" />"; // navMenu devision echo "<div id=\"navMenu\">\n"; // Section List echo "<ul class=\"navlist\">\n"; // First section echo "<li>\n"; echo "<div class=\"navhead\" onclick='IsOpen(0)'>Literature</div>\n"; // First link list echo "<ul class=\"navlist\" id=\"sm0\" style=\"display:block;\">\n"; echo "<li><a href=\"\" class=\"navlink\">Guides</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Web Reference</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Desktop Reference</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">External Reference</a></li>\n"; echo "</ul>\n"; // End first section echo "</li>\n"; // Second Section echo "<li>\n"; echo "<div class=\"navhead\" onclick='IsOpen(1)'>Fun and Random</div>\n"; echo "<ul class=\"navlist\" id=\"sm1\" style=\"display:none;\">\n"; echo "<li><a href=\"\" class=\"navlink\">Videos</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Images</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Music</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Random Page</a></li>\n"; echo "</ul>\n"; echo "</li>\n"; // End Second Section // Third Section echo "<li>\n"; echo "<div class=\"navhead\" onclick=\"IsOpen(2)\">Code Base</div>\n"; echo "<ul class=\"navlist\" id=\"sm2\" style=\"display:none;\">\n"; echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">Java</a></li>\n"; echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">C++</a></li>\n"; echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">PHP</a></li>\n"; echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">JavaScript</a></li>\n"; echo "</ul>\n"; echo "</li>\n"; // End Third Section // Fourth Section echo "<li>"; echo "<div class=\"navhead\" onclick=\"IsOpen(3)\">General</div>\n"; echo "<ul class=\"navlist\" id=\"sm3\" style=\"display:none;\">\n"; echo "<li><a href=\"\" class=\"navlink\">About Us</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Don't Like the Look?</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Community</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Site Map</a></li>\n"; echo "</ul>\n"; echo "</li>\n"; // End Fourth Section // End Section List echo "</ul>\n"; // End navMenu echo "</div>\n"; // Stats echo "<div class=\"navhead\" style=\"height:150px;\"><img src=\"images/stats.jpg\" alt=\"TempStats\" /></div>\n"; // Scripts echo "<script type=\"text/javascript\" src=\"javascript/menuwork.js\"></script>\n"; // echo "<script type=\"text/javascript\" src=\"javascript/LoadCss.js\"></script>\n"; } ?> Note: I apologize for only pasting the HTML, this is the HTML as seen by IE after scripts have been run. I would have put links but I am a new user and that appears to be restricted. Removed direct URL access to the javascripts, images, and doctypes, as a result of being a new user as well, in the actual source they are accessed by a URL to ensure that it is compatible no matter which directory the functions are called within. That being said, the javascript was never a problem, even with the display issue, the javascript functioned as expected. Any help would be very appreciated 8-) See: http://www.mandgweb.net/css_help/ I am trying to get the 'divs' of the 3 columns of content (A, B, C) to expand to the height of the tallest column (in this case 'A') while the height of the main container (blue border) expands/contracts as necessary to accommodate the tallest column. The main effect I am trying to achieve it to get the vertical rules between the columns to be the same height (i.e. the height of the tallest column). Easier said then done..? Thanks in advance. Hi... I have got a problem with a page I am working on. I have got at stylesheet for my site. By this stylesheet I want my page to look the same nearly always. But unfortunately the page moves around and the width of my <div> tags changes from time to time. This image is of the page as it should look: http://www.student.dtu.dk/~s011606/width2.jpg And this image is as it often looks like: http://www.student.dtu.dk/~s011606/width1.jpg I would like the page to look like the first image at all times.. But i cant find the problem in the stylesheet.. My default page looks like this: Code: <TABLE width="100%">
<TR>
<TD valign="top">
<div id="centermainbox">
<?php
if (!isset($page)) {
include "frontpage/frontpage.php";
}
else {
include($page . "/" . $page . "_page.php");
}
?>
</div>
</TD>
<?PHP
if ($_SESSION['inst_msg']) {
echo '<TD width="285" valign="top">';
echo "<div id=\"instantbox\">";
echo '<IFRAME src="instantmsg/inst_msg_page.php" HEIGHT="100%" WIDTH="100%" frameborder="0"></IFRAME>';
//$db_connection->db_stop();
echo "</div>";
echo "</TD>";
}
else {
echo "<td width=\"20%\"></td>";
}
?>
</TR></TABLE>
The relevant informations in the stylesheet looks like this: Code: #centerbox {
position: relative;
top:1px;
left: 20em;
width: 75%;
padding : 0px 0px 0px 0px;
}
#centermainbox {
position: relative;
top:0px;
left: 0em;
height: auto;
width: auto;
min-height: 490px;
background: white;
border:1px solid #8CACBB;
padding : 10px 10px 10px 10px;
overflow: auto;
}
#instantbox {
position: relative;
top:0px;
min-height: 490px;
height: 490px;
min-width: 285px;
max-width: 285px;
width: 285px;
background: white;
border:1px solid #8CACBB;
padding : 10px 10px 10px 10px;
overflow: auto;
}
I hope there is someone who can help me.. Kind regards Jens... A left floating text box that text wraps around the top, right and bottom is not rendering at the same size in all browsers (IE and Firefox are my main test platforms). The page was going pretty well, thanks to some help I have already received, but I hit a snag on this. Please take a look at the test page below. TEST PAGE The relevant style code follows: Code:
.textboxleft
{
background: #3E5C92;
font: normal 0.8em/140% arial, helvetica, sans-serif;
margin: 10px;
width: 160px;
border: 1px solid #E4E7F5;
float: left;
overflow: hidden;
padding: 0.5em;
}
.textboxleft p
{
color: #000000;
}
ul li
{
color: #E0E0F6;
font: normal 0.9em/135% tahoma, arial, helvetica, sans-serif;
}
Of course, you can also look at the complete source code and download the css file for more information. I would be happy to provide any additional information. If there is something I can alter in the CSS to make the box 160px wide (or whatever I decide on) in all browsers, please let me know. I am very new at this and have only gotten this far with the help of people like you. Thank you, Grump PS: you will also notice another thread concerning the bulleted list problem you see. It bumps into the text box and doesn't look good. Please excuse any redundancy, but these are 2 different problems, I think. 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 I need to link to differnt style sheets to a page and i need it so it will use one if the user has IE and a differnt one if the user is using anything else that works properly. Is this posable and if it is please tell me how? and if theres a way of doing it that uses php i would like to use that method. thanks 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 Hey All: Its that time again- testing my pages in different browsers. I have browser cam for another 7 hours, this is my snapshot of the page I am testing. Ok, this is the first time I am testing my code. Any reason why older browsers are not interpreting my CSS correctly? Maybe something I should know about older browsers. Any feedback is helpful- thanks 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... Hello, With following css for header Code: div#header{
height:75px;
background-color:#ffffcc;
}
I am getting three different views in IE, FF, Opera. In IE entire background color is pale yellow, In FF only the line is pale yellow. In opera line and area below it is pale yellow. Here goes goes html. Code: <div id="header"> <h3 align = "center">Welcome to <b>Your Space</b></h3> </div> What is going wrong here? Thank you. Hi all, Compatibility with different browsers, link one and link looks good in ie but gets overlap in Firefox and too far apart in Opera. Does anyone know how to make this menu compatible with a least these tree browsers. Any help is greatly appreciated thanks. Code:
<style type="text/css">
ul { list-style-type: none; margin: 1.0em 0 0 30px; padding: 0; position: relative; overflow: visible; height: auto; }
ul li { height: 1.6em; width: 230px; }
ul li a, ul li a:visited { width: 200px; display: block; color: black; text-decoration: none; background: yellow; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px;}
ul li a:hover { display: block; background: green; color: black; }
ul li a.currentpage, ul li a.currentpage:visited { background: red; color: black; padding: 3px;}
</style>
<ul>
<li><a href="menu3.html" class="currentpage">Main page </a></li>
<li><a href="page2.html">Dummy page 2</a></li>
</ul>
Hello, I've got a question about CSS3. That are the correct procedures to make my CSS code compatible with all the browsers ? For example, I want that the elements of my website stay identicals on all the browsers. Thank you in advance ! 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 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'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>
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 All, Just in the middle of designing a website for my personal hobbies. I have used alot of CSS to create the layout of the page. The problem being it looks perfect in Firefox, Opera, Seamonkey etc etc BUT NOT IE!!! In IE it is all over the place, nothing is where it should be. I checked my CSS against w3 validator, and it came back with a few errors, so i decided to fix them... it then looked even worse... in ALL BROWSERS! So i decided to go back to how i had it originally. The site in question is my username. You can access the css stylesheet file by adding /test.css to the end of the domain name. Any information, or anyone else had problem like this? All the best for now, Mike 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? 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 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 |
|||||||