|
CSS - Cross-browser Issue With Id's
This template works perfectly in firefox (as I want it) but the background-images won't show and the margin/padding shows wrong. When I validate the CSS in firefox, it goes through, but when I do it in IE, it tells me that the id's are suppose to be used for block elements. I've done a search and read up on this over at w3schools but it was fruitless. I would like for it too look in IE the way it does in FF.
I think it has something to do with the header or some part of the id's, because that feels a bit odd coding from my part. Please excuse the poorly formatted CSS, as the first part of it was made online where you had to use space to format it. Here is my source code: css Code: Original - css Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Omega Destiny</title> <style type="text/css"> body { background-color: #CCCCCC; color: #FFFFFF; } a:link { text-decoration:none; color: #104E8B; background-color: #E8E8E8; } a:hover { text-decoration: none; color: #104E8B; background-color: #E8E8E8; } a:visited { text-decoration:none; color: #104E8B; background-color: #E8E8E8; } a:active { text-decoration: none; color: #104E8B; background-color: #E8E8E8; } #wrapper { width:900px; margin:0px auto; text-align: center; } #header { height:100px; background-color: #CCCCCC; background-image: url(http://img476.imageshack.us/img476/1419/banner7sy.jpg); background-repeat: no-repeat; background-position: left; color: #FFFFFF; } #cornernav { text-align: center; float:right; width: 580px; background-color: #E8E8E8; color: #000000; border: 1px solid #000000; height: 99px; } #cornernav h2 { background-image: url(http://img204.imageshack.us/img204/664/maintitle8wo.jpg); text-align: center; font-size:100%; height:1em; line-height:1.6em; padding-bottom: 9px; margin-top: 0px; position: relative; bottom: -1px; } #cornernav p { margin-left: 10px; margin-right: 10px; margin-top: -10px; } #sidenav { float: left; width: 18%; background-color: #E8E8E8; color: #000000; border: 1px solid #000000; } #sidenav a:link { text-decoration: none; color: #000000; font-weight: bold; background-color: #E8E8E8; } #sidenav a:hover { text-decoration: none; color: #104E8B; font-weight: bold; background-color: #E8E8E8; } #sidenav a:visited { text-decoration: none; color: #000000; font-weight: bold; background-color: #E8E8E8; } #sidenav a:active { text-decoration: none; color: #000000; font-weight: bold; background-color: #E8E8E8; } #sidenav h2 { background-image: url(http://img204.imageshack.us/img204/664/maintitle8wo.jpg); text-align: center; font-size:100%; height:1em; line-height:1.6em; padding-bottom: 9px; margin-top: 0px; position: relative; bottom: -1px; } #sidenav p { margin-left: 10px; margin-right: 10px; margin-top: -10px; } #content { float: right; text-align: left; width: 80%; background-color: #E8E8E8; color: #000000; border: 1px solid #000000; } #content p { margin-left: 10px; margin-right: 10px; } #content h2 { background-image: url(http://img204.imageshack.us/img204/664/maintitle8wo.jpg); text-align: center; font-size:100%; height:1em; line-height:1.6em; padding-bottom: 9px; margin-top: 0px; position: relative; bottom: -1px; } /* .footer { text-align:center; float:right; font-size:12px; color: #000000; margin-bottom: 20px; width: 80%; background-color: #E8E8E8; } */ </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="cornernav"> <h2>Interent Service</h2> <p> This is a box designed to be a short and comprehensive. You can use it to give a statement for what the website is about, a quote or simply some random text. Anything goes, since you are the one that is going to use it. There is enough space for three full lines of text. Enjoy! </p> </div></div> <br /> <div id="sidenav"> <h2>Site Navigation</h1><br /> <p><a href="#">Home</a><br /> <a href="#">About</a><br /> <a href="#">Contact Us</a><br /> <a href="#">Portfolio</a><br /></p> </div> <div id="content"> <h2>Omega Destiny</h2> <p><a href="#">Welcome</a> to my website template called Omega Destiny. It is a big improvement from my previous design called "Arcane Flame" and is meant to have a very professional look with its gray theme. Omega Destiny is table-less and entirely based on divs.</p> </div> <!-- <div class="footer"> Design by "Moridin". Copyright 2006 All Rights Reserved. </div> --> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Any and all help and comments is appreciated. Best Regards, Moridin Similar TutorialsI'm designing a site with a combination of css and tables and I've run into some issues w/IE. I've got some content in a nested table <table id="content"> <tr> <td> Content... </> </> </table> and in my style sheet i have #content{ padding-left:20px; ... } Firefox recognizes this property just fine and displays the table slightly indented, but IE seems to completely miss it. I have figured out a few workarounds, but they end up causing more problems and there are also other thigns that IE has been missing.. Does anyone know what might be causing this? ALSO i have a <div id=divider> inside a td w/css props as width:1px and height:100% and background-color:#000000. again, firefox recognizes this and displays a black line that is the height of the td and 1 px wide, but IE displays a little midget line thats like 10px tall instead of the entire height of the cell. wtf? Hi All Can anyone please tell me where am I going wrong in code below it fairly straight forward, Style switcher works fine. The problem is When I'm using Firefox background image doesn't show but there no problem in IE. why???? Thanks Zed 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=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="styleSheetSwitcher.js"></script> </head> <body><center> <div id="main">Hello <div id="centerbox">world</div> </div></center></body> </html> css code Code: #main {
position: relative;
background-image:url(images/Driving_bkg3.gif);
background-repeat: no-repeat;
height: 100%;
left: 5%;
}
#centerbox {
margin: -20% 3% 0 40%;
padding: 0%;
width: 41%;
height: auto;
background-color:#C9F;
}
Hi, I have a template that works perfectly in Internet Explorer, but doesn't work well in all the other browsers. Here is the template: http://www.gmaptools.com/redemo/format.html (The scrollbar located on the right of the page doesn't contain to 100% height in the other browsers) The entire page must stay at 100% height and 100% width, and work in the other browsers the same way it works in Internet Explorer. Does anyone know why it isn't working in the other browsers? I need it to work in: 1. Internet Explorer (Windows) 2. FireFox (Windows & Mac) 3. Opera (Windows) 4. Safari (Mac) I really appreciate any assistance you can give me. Thanks in advance, Hi I'm developing a new website using non tabular css and xhtml. I've used a predefined template which has been edited to my needs for the project. The problem I have is the top menu displays perfectly in FF3 but not in IE7, the top menu has a width of 100% with each of the 4 links having a width of 25% so in FF3 displays right across the page perfectly, but in IE7 the last menu link breaks to a new line. This url shows the issue im having: http://www.purepcs-store.co.uk/tim/new HTML USED: Code:
<div id="menu" class="width">
<ul>
<li>
<a href="index.php" onfocus="blur()">
<span class="title ">Home</span></a>
</li>
<li>
<a href="products.php" onfocus="blur()">
<span class="title ">Products</span></a>
</li>
<li>
<a href="forum/" onfocus="blur()">
<span class="title ">Forum</span></a>
</li>
<li>
<a href="contact.php" onfocus="blur()">
<span class="title ">Contact Us</span></a>
</li>
</ul>
</div>
RELEVANT CSS: Code:
#menu {
margin: 0 auto;
}
#menu ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
text-align: left;
background: #3B5D77 url(../images/bg/menu.gif) repeat-x top left;
}
#menu ul li {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li a {
float: left;
width: 25%;
font: 400 1.2em arial, sans-serif;
letter-spacing: 0.1em;
color: #fff;
border-top: 7px solid #41637D;
border-bottom: 15px solid #FFF;
}
#menu ul li a span {
display: block;
padding: 2px 7px;
}
#menu ul li a span.desc {
font-size: 0.8em;
color: #8C8D94;
}
#menu ul li a:hover,
#menu ul li a.here {
background: #4A5C6A;
border-top: 7px solid #455660;
}
#menu ul li a:hover span.desc,
#menu ul li a.here span.desc {
color: #FFF;
}
.width {
width: 100%;
}
full css code can be seen he http://purepcs-store.co.uk/tim/new/css/layout.css Does anyone have any ideas on how to combat this issue, if you can point me in the right direction it would be much appreciated. Cheers Hello, I am having an alignment issue that I can't seem to fix. The site is accessed he http://cbo4edu.org/newSite/index.html I've used 2 different CSS files... one for the homepage and one for all the other pages . For the homepage, I want the Mission headline to just touch the blue border from the navigation. Right now when viewed in Firefox on my Mac there is an extra white box above it with nothing in it... but in IE it looks fine. How do I get it to look the same in both browsers? For the other pages, I'm having a similar issue. I want about the same amount of white space above the main headings without the words getting cut off. How can I fix this in both browsers? Thank you in advance. Hi Everyone I have created a design in CSS and HTML but it appears differently in all of the browsers that I have tested it on can anyone take a look and tell me where I am goin wrong? 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" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>
<body>
<div class="wrapper">
<div id="hometext" style="background-color: transparent">{content}</div>
<div class="mainbody" style="background-color: transparent">
<div class="headermenu"><a href="http://live.orotor.co.uk">Home</a> | <a href="http://live.orotoro.co.uk/index.php?page=stock">Stock</a> | <a href="http://live.orotoro.co.uk/brochure.html">Brochure</a></div>
<div class="headerlogo"><img src="img/logo.gif" border="0" /></div>
<div class="washingline"><img src="img/washingline.png" border="0" usemap="#Stock" />
<map name="Stock" id="Stock">
<area shape="poly" coords="47,151,129,159,136,96,142,98,156,82,141,56,115,46,82,43,55,45,33,71,44,86,52,88" href="#" alt="Apply here for Credit!" />
<area shape="poly" coords="199,182,282,187,283,123,289,125,306,106,285,81,262,74,228,75,202,80,180,105,194,122,198,118,200,121" href="#" alt="Our Garment Specifications" />
<area shape="poly" coords="384,196,467,193,465,130,471,130,483,112,463,88,438,82,407,82,380,90,360,115,373,132,381,131" href="#" alt="Look at our Wonderful colours" />
<area shape="poly" coords="627,181,700,143,671,86,678,86,682,61,652,50,627,55,598,69,578,89,570,121,591,130,598,126" href="#" alt="See our latest stock levels" />
</map>
</div>
<div style="position: absolute; top: 530px; height: 99px; width: 793px; margin: 0 auto;"><img src="img/footerbanner.png" border="0" /></div>
</div>
</div>
</body>
</html>
CSS Code:
body {
margin: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12.5px;
font-weight: 600;
overflow: hidden;
}
a {
text-decoration: none;
color: #000000;
}
input
{
height: 20px;
width: 250px;
border: 1px solid #e7ca3c;
background-color: transparent;
color: #000000;
}
textarea
{
height: 100px;
width: 249px;
border: 1px solid #e7ca3c;
background-color: transparent;
color: #000000;
}
a:hover {
text-decoration: none;
color: #e7ca3c;
}
.wrapper
{
margin: 25px auto;
width: 794px;
height: 748px;
text-align: center;
overflow: hidden;
}
.mainbody
{
width: 794px;
height: 748px;
background-image: url(img/background.gif);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
border-top: 1px solid #e7ca3c;
}
.headerlogo
{
width: 368px;
height: 134px;
float: left;
clear: right;
margin: 5px;
position: absolute;
background-color: transparent;
}
.headermenu
{
width: 300px;
float: right;
margin: 5px;
padding: 59px 0px 59px 59px;
position: relative;
text-align: right;
}
.washingline
{
width: 793px;
height: 217px;
position: absolute;
top: 260px;
}
#hometext
{
position:absolute;
left:250px;
top:189px;
width:729px;
height:153px;
z-index:1;
}
Any help would be really appreciated as I am really flumoxed here. Best Justin Hi there, I have run out of ways to figure out this problem. I have incorporated a Blog into my website: http://www.kohlrbaby.com/blog/ It works fine in IE but not in FF. For some reason the the #contentHolder is not reading the #leftcontent and is not extending. If I try adding height: 100%; this corrects the problem for the blog page, but messes up the look of the rest of my site. Any suggestions? Help greatly appreciated!!! Here is the applicable css code: #contentHolder{ PADDING-TOP: 0px; PADDING-bottom: 30px; PADDING-left: 0px; PADDING-right: 0px; BORDER-RIGHT: #000000 1px solid; BORDER-Bottom: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 650px; POSITION: relative; BACKGROUND-COLOR: #ffffff; text-align: center; } #leftcontent p { padding: 10px 30px 0px 30px; line-height: 1.75em; text-align: left; } #rightcontent p { padding: 10px 30px 0px 30px; font-size:10px; text-align: left; line-height: 1.75em; } #leftcontent { float:left; width: 65%; background:#fff; margin-right:15px; padding-bottom:20px; BORDER-right:#000000 1px solid; POSITION: relative; } #rightcontent, #leftcontent { padding: 10px 30px 0px 30px; line-height: 1.75em; text-align: left; } h3{ line-height: 1em;} #rightcontent { line-height: 1em; } #rightcontent ul{ list-style: none; text-align: left; font-size:10px; } #rightcontent ul li { margin-bottom: 5px; } .post { border-bottom: 1px solid #000; padding-bottom: 3px; } Hello all, My website appears fine on Firefox 3.6.7 but not on IE 8 (it is missing the borders on the article text area and the login box is up too high). I notice you can't include URLs in the post for new members so any help is greatly appreciated. Thanks! i have a web site that i am redesigning and the redesign is @ http://cometosandiego.com/weekendvisit/index.php it shows up GREAT in firefox screwed in opera and COMPLETLY out of wack in IE 6 and 7 what to do???? thanks Anyone have any recommendations on a good program to check cross browser stuff. I am tired of having to open every browser up to check my sites. Also, anyone know any good links for getting better at coding for cross browser CSS? Thanks! I am having problem making this cross browser friendly Code:
/* Div Structure */
#heading {
margin: 0;
position: relative;
top: -20px;
background-color:#0066CC;
}
#search {
float: left;
}
#img {
float:left;
}
#text {
float:right;
}
#phone {
position: relative ;
float: right ;
top: 15px ;
right: 10px
}
#head {
margin: 5px ;
padding: 0;
height: 195px;
background-color: #FDFCFF;
border: solid;
border-color: #0066CC;
border-width: 2px;
background-color: #FDFCFF;
}
#headnav {
float: right ;
margin: 100px 17px 5px 10px;
padding: 0;
}
#sidebar {
float: left ;
background-color:#FDFCFF;
border-width:2px;
border-style:solid;
border-color: #0066CC;
padding: 10px;
width: 170px;
margin: 2px;
margin-top: 5px;
height: 530px ;
}
#mainpage {
float: right;
position:relative;
width: 730px ;
right: -5px;
left: -5px;
border: solid;
border-color: #0066CC;
border-width: 2px;
background-color: #FDFCFF;
margin-top: 5px;
}
/* Side Bar */
#sidebar h3 {
color:black;
font-size: 11px;
font-weight: normal;
letter-spacing: 0.2em;
margin: 5px;
padding: 0px;
text-transform: uppercase;
border-bottom:dashed;
border-bottom-color:black;
border-width: 1px;
}
#sidebar ul, #sidebar ol {
list-style: none;
margin: 0;
padding: 0;
}
#sidebar li {
margin: 0;
list-style:none;
padding: 0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#sidebar a {
color: #9999FF;
text-decoration:none;
}
#sidebar a:hover {
color: black;
text-decoration:underline;
}
#sidebar div {
margin: 20px 0;
padding: 0;
}
/* Header Style */
#head h1 {
font-family:Verdana, Arial, Helvetica, sans-serif ;
letter-spacing: 0.5em;
font-size: 2em;
color: black;
}
#head a {
color: black;
text-decoration: none;
}
/* Head Nav */
#headnav a {
color: black;
text-decoration:none;
}
#headnav a:hover {
text-decoration:underline;
}
#headnav p {
color:black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:0.1em;
}
/* Main Page */
#mainpage img {
padding: 10px;
}
#mainpage h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:black;
letter-spacing: 0.5em;
font-style: bold ;
border-bottom: solid;
border-bottom-color:#0066CC;
border-bottom-width: 2px;
}
#mainpage p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#mainpage li {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}
#mainpage h3 {
font-family:Verdana, Arial, Helvetica, sans-serif;
border-bottom: dotted;
border-bottom-color: black;
border-bottom-width: 1px ;
latter-spacing: 0.2 em;
font-size:18px;
}
#mainpage a {
color: #910B2D;
text-decoration:none;
}
#mainpage a:hover {
color:silver;
text-decoration:underline;
}
/* Phone */
#phone p {
color: black ;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px ;
}
/* Heading's */
#heading h2 {
color: white;
}
Hi; I don't mind writing straight CSS with a text editor; my big problem is cross-browser compatibility -- getting all those tweaks for everything you do to include ie 5, 6 & 7 (I guess we can drop 5 by now). To that end, I don't object to using an IDE or other tool to develop cross browser CSS. So my question is, what is/are the best resources available to handle the cross-browser issues; from broken box model, etc. ** I know about ie7-js from Dean Edwards, but I don't know how well that works. ** I know about some CSS IDE's like Aptana & Stylizer; but again I don't really know how well they handle these issues. ** And I would like to hope there are some sites out there with total references that tells you everything you need to know about cross browser CSS, though all I've found so far are piecemeal articles; how to handle this or that aspect. So in short, I don't expect one magic bullet (though that would be nice), but I'm looking for pointers to and evaluations of various resources that could be maybe used together to make this problem a little easier. Thanks How does one make a header like this cross browser compatible? It works in most browsers but I noticed in IE8 it renders the header weird. Here is the CSS: Code: .header { position: relative; padding-bottom: 0; z-index: 20; }
#banner-top { float: right; line-height: 0; margin: 20px 20px 20px 0px; }
.logo { float: left; margin: 0 50px 0 20px; }
.logo.image { line-height: 0px; }
.logo .plain-text { font-size: 20px; line-height: 30px; font-weight: bold; }
.logo #tagline { font-size: 11px; font-style: italic; }
#search-bar { float:left;
margin-top:25px;
z-index:500;}
#search-bar #home_search {
display: block;
height: 40px;
margin: 0;
padding: 4px;
position: relative;
width: 595px;}
#search-bar #home_search_input { background: none repeat scroll 0 0 transparent;
border: 1px solid #C6C6C6;
color: #666666;
display: inline-block;
font-size: 12px;
height: 40px;
line-height: 14px;
padding: 0 10px;
width: 480px; }
#search-bar #home_search_submit {
border: 1px solid #dc5653;
background: #fe5d62; /*fallback for non-CSS3 browsers*/
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fe8781) to(#fe5d62)); /*old webkit*/
background: -webkit-linear-gradient(#fe8781, #fe5d62); /*new webkit*/
background: -moz-linear-gradient(#fe8781, #fe5d62); /*gecko*/
background: -ms-linear-gradient(#fe8781, #fe5d62); /*IE10*/
background: -o-linear-gradient(#fe8781, #fe5d62); /*opera 11.10+*/
background: linear-gradient(#fe8781, #fe5d62); /*future CSS3 browsers*/
-pie-background: linear-gradient(#fe8781, #fe5d62); /*PIE*/
repeat scroll 0 0 transparent;
border: 0 none !important;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: bold;
height: 43px;
padding: 0 10px;
margin-left: 6px;
width: 80px;}
Does anybody know how to tweek this code to render the same in all browsers? Freaking IE8! Ok, so I've having some problems getting a webpage I'm designing looking good (I'm better at the "behind the scenes" coding, not so much the visual part). Anyway, I'm having some problems in Firefox and even more in IE, so here goes. In Firefox I want it to extend all the way to the bottom of the page, I tried adding "min-height:100%" to the container's styles, but that doesn't work. Can I not use a percent for the min-height? If I directly declare the height to be 100%, then the body can expand outside of the container rather than the container expanding with it. I also want to make sure that the body is always completely filling the container. The page in question is he http://www.magicsoftinc.com/michigans_edition/ My styles are below and you can view the page source or use Firebug to see the elements I'm talking about Code: a:link {
color:black;
text-decoration:underline;
}
a:active {
color:black;
text-decoration:none;
}
a:hover {
color:black;
text-decoration:none;
}
a:visited {
color:black;
text-decoration:underline;
}
body {
background-color:#BBCCFF;
font-family:Calibri, Arial, Helvetica, sans-serif;
margin-bottom:0;
margin-top:0;
}
div {
border:0px solid #FF0000;
border-top-width:0;
}
img {
border-width:0;
}
.even{
background-color:#FFCCBB;
}
.odd {
background-color:#BBCCFF;
}
.preload{
display:none;
left:-9001px;
position:absolute;
top:-9001px;
}
#background {
height:100%;
left:0;
margin:0;
overflow:hidden;
padding:0;
position:absolute;
top:0;
width:100%;
z-index:-9001;
}
#backgroundLeft{
position:fixed;
top:0;
left:0;
height:100%;
}
#backgroundRight{
position:fixed;
top:0;
right:0;
height:100%;
}
#body {
background-color:#FFFFFF;
color:#000000;
min-height:250px;
}
#container {
border:1px solid black;
border-bottom-width:0;
border-top-width:0;
height:100%;
margin:0 auto 0 auto;
min-height:100%;
min-width:760px;
width:95%;
}
#diggThis {
background-color:transparent;
margin-left:-27px;
z-index:-9001;
}
#footer {
background-color:#FFFFFF;
text-align:center;
font-size:small;
}
#header {
background-color:#000000;
height:271px;
}
#leftMenu {
background-color:#BBCCFF;
float:left;
margin-right:4px;
padding:4px;
width:260px;
}
#main {
min-width:500px;
padding:4px;
}
#main .title {
font-size:xx-large;
font-weight:bold;
}
#menu {
background-image:url("images/menuGradient.png");
background-repeat:repeat-x;
border-top:1px solid #7E7E7E;
border-bottom:1px solid #4E4E4E;
color:#FFFFFF;
font-weight:900;
height:35px;
position:relative;
top:-35px;
}
#menu a:link {
color:white;
text-decoration:underline;
}
#menu a:active {
color:white;
text-decoration:none;
}
#menu a:hover {
color:white;
text-decoration:none;
}
#menu a:visited {
color:white;
text-decoration:underline;
}
#menu .button {
background-image:url("images/menuButtonUp_blue.png");
background-position:center;
background-repeat:no-repeat;
color:#FFFFFF;
font-weight:600;
height:35px;
overflow:hidden;
padding:0;
text-align:center;
width:106px;
}
#menu table {
padding:0;
text-align:center;
width:100%;
}
#menu tr {
padding:0;
}
#userPanel {
position:absolute;
right:3%;
top:136px;
width:200px;
height:100px;
background-color:#BBCCFF;
}
I know there are a lot of articles lying around about this problem, but im having trouble with css layout for a site im working on, in IE6.0 the site displays as it should do. in Opera 7.23 + 7.11 the site displays with the main text sitting on the logo for the page, in firefox it displays as it does in opera. I am using includes for the full page with no html in the index.php page, i have tried this without includes bur get the same problems as before. the site addy is: http://www.kptspanishproperties.org.uk any help wpuld be great, also im not using tables just using css for all the layout needed Im not a newbie to CSS but I am still a bit new to hand coding and div positioning. heres the link - http://members.cox.net/tekjock/test/ the body section I want it to be bottom 5px Left 5px right 5px I can get it to look good in firefox but IE it looks like crap. I have tried the above and it does not work. Any suggestions Thanks I was wondering if anyone knows of downloadable software for cross-browser testing (other than downloading all browsers manually). I know there are several websites that offer these features, but I'd like downloadable software as well. It would be even better if it offered some emulators for mobile device browsers as well.... Anyways, just wondering if anyone knows of anything good other than the online web service ones. Okay, my layout is css, and the problem is with my footer, and bottom links. In mozilla, they look the way i want them to, but for IE, they are positioned too low, and the bottom links are unreadable. Take a look - www.funny-guys.com The Code: #bottomlinks { margin:0px 0px 20px 0px; padding:0px; font-size:10px; color:#999999; text-align:center; div#footer { margin: 0px 0px 12px 0px; font-size:60%; text-align:center; padding:0; } Thanks Hi all, I'm relatively new to pure CSS (as opposed to hacking tables together) and I'm experiencing a cross-browser inconsistency that I'm hoping I can get help with. I've created a table using DIVS as follows (I've given just one line as an example): Code: <div id='dashed_box'> <div class='divleft'>Company Name:</div><div class='divright'><input type='text' name='company_name' size='32' class='boxes'></div> <div class='spacer'> </div> </div> And the CSS is this: Code: #dashed_box
{
border: 1px dashed #333333;
margin:5 auto;
padding:5 auto;
width: 600px;
}
.divleft {
font-family: verdana;
font-size: 12px;
line-height: 20px;
float: left;
text-align: right;
color: #000;
width: 49%;
}
.divright {
font-family: verdana;
font-size: 10px;
float: right;
text-align: left;
font-weight: bold;
color: #000;
width: 49%;
}
div.spacer {
clear: both;
}
..In IE7 the box is laid out perfectly, as I wanted it to: ..but in FireFox 5.0, it is laid out as follows, which I don't want: Can anyone point out what I might be doing wrong? Or might it be a case of defining HTTP_USER_AGENT and specifying CSS depending on browser? All help appreciated. Woolyg. On this site http://www.freewaytransmissions.com I am having issues with the spacing on the navigation. The nav is an ul and I used inline css for spacing the links apart, but as you see in Chrome they are spaced correctly, but in IE they are not aligned correctly. If someone can shed some light I'd appreciate it. Thanks. Tom |
|||||||