|
CSS - Fieldset, Are There Cross-browser Issues? Also Is There An Ie Fix For Background Css?
i really like the fieldset due to having the title in the middle of the border, but are there any cross-browser issues?
also what i'm finding is that if i set background styling. IE sets the background colour to include the legend aswell, whereas Firefox sets the background colour to the confines of the border. Ideas welcome and asked for Effective Alternatives also welcomed Similar TutorialsOn 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 Hi there, I am reposting this question after removing the extraneous items from the site. Basically, I can get things to line up in either IE or FF, but not both, I have managed to solve this with past sites, but can't seem to figure this one out! Currently I have it set so it is correctly displayed in IE: http://www.kohlrbaby.com/vcc/portfolio/portfolio.htm Please, please help me to figure out how to do fixes for this issue, I have been searching online but can't seem to figure it out and am very frustrated! Thanks so much and here is my CSS: body { margin: 0px 0px 30px 0px; padding: 0px 0px 0px 0px; font-family: verdana, arial, helvetica, sans-serif; color: #000000; background-color: #999999; text-align: center; } #title{ margin-top:0px; margin-bottom: 0px; margin-right: 0px; margin-left:0px; position: relative; float: left; clear: left; } #rightBox { border-right: 2px solid #666666; width:625px; padding: 0px; border-top: 2px solid #666666; border-bottom: 2px solid #666666; border-left: 2px solid #666666; margin-top: 0px; margin-bottom: 0px; margin-right: 0px; margin-left:0px; background: #ffffff; } .mainPic { margin-top: -475px; margin-bottom: 0px; margin-right: 0px; margin-left: 30px; position:relative; float: left; clear: left; z-index: 100; } img.pic{ border-right: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; } PS: i know I don't need to have all my margin positions shown (ie: may eventually become margin: 0px), however I have kept it like this until I figure out what my problems are. I have this design: http://www.thewildlifemuseum.org/designs/25/content.html Code is below. Styles are mostly within the tags. IE 6 is currently the working browser, while Firefox has the obvious problem of being too wide. I really want to be able to put that curve in but won't be able to as it currently is. Any suggestions as to how to fix it? Code:
<html>
<head>
<title>The International Wildlife Museum</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
BODY,HTML {height:100%;}
BODY {margin:0; font-family:Arial,Helvetica,sans-serif; font-size:16px; background-color:#D9A156;}
#header {text-align:center; background-color:#4A308C; padding:10px; height:144px;}
#middle {background:url("images/gradbg.gif") repeat-x; width:100%;}
#menu {background:url("images/gradbg.gif") repeat-x;}
#footer {}
</style>
</head>
<body>
<div id="header"><img src="images/header.gif" alt="International Wildlife Museum: Tucson's Natural History Museum" width="465" height="144"></div>
<div style="position:absolute; left:0; top:164px; width:170px; height:467px; z-index:5;" id="menucontainer">
<img src="images/menu/menucontainer.gif" width="170" height="373">
<div style="position:absolute; left:10px; top:15px; width:160px; z-index:30;" id="menutext">
Design<br>
Design<br>
Design
</div>
</div>
<div id="middle" style="position:absolute; left:0; top:164px; height:370px;"><img src="images/gradbg.gif" width="3" height="370">
<div style="position:absolute; left:764px; top:13px; width:36px; z-index:20;" id="trcorner"><img src="images/trcorner.gif" width="36" height="34" alt=""></div>
<div style="position:absolute; left:101px; top:13px; width:699px; border:solid 3px #000000; background-color:#FFFFFF; padding-left:69px;" id="body">
<div id="content">
<span style="font-size:180px;">N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br></span>
</div>
</div>
</div>
</body>
</html>
Hello all, I have a really anoying alignment issues with fire fox and IE. Have a look at the follwoing page in both browsers: http://pfwd.org.uk/style.htm I need to get IE to display what Firefox shows. The four rows on the left hand side (date, date value, number and number value) need to be aligned with the rows Descirption and description value. Please note not all style code is in the external stylesheet external CSS file: PHP Code: body{ background-color:#006699; font-family:Arial, Helvetica, sans-serif; } .main, header, subHeader{/*Positon values that make every thing go inside the main box */ position:absolute; left:100px; } .main, subHeader dbItem{ border: solid 1px #0099CC; } .main, header{ top:125px; left:140px; width:451px; } .main{ height:300px; } .header{ background-color:#0099CC; font-size:12px; font-weight:800; } .subHeader{ height:22px; width:200px; border: solid 1px #0099CC; background-color:#FFCC66; float: left; font-size:10px; font-weight:700; padding: 2px; } .dbHeader{ border: solid 1px #0099CC; background-color:#FFCC66; font-size:10px; font-weight:600; padding: 2px; width: 50px; } .dbItem{ background-color:#FFFFFF; border: solid 1px #0099CC; font-size:10px; font-weight:700; padding: 2px; width:50px; } .dbdescripHeader{ border: solid 1px #0099CC; background-color:#FFCC66; font-size:10px; font-weight:600; padding: 2px; width: 364px; float:right; } .dbdescripItem{ background-color:#FFFFFF; border: solid 1px #0099CC; font-size:10px; font-weight:700; padding: 2px; width:50px; width: 390px; float:right; height:48px; } .link{ font-size:11px; font-weight:700; font-family:Arial, Helvetica, sans-serif; padding:2px; color:#0099CC; text-decoration:none; float:right; } .links{ background-color:#006699; border: 1px solid #0099CC; border-top:1px solid #0099CC; color:#0099CC; text-decoration:none; padding:0 2px; } .link a:hover{ font-size:11px; font-weight:700; font-family:Arial, Helvetica, sans-serif; padding:0 2px; text-decoration:none; color:#FFCC66; background-color:#006699; } br{ margin-top:-15px; } .subsubheader{ border: solid 1px #0099CC; background-color:#FFCC66; float: left; font-size:10px; font-weight:700; padding: 2px; } page file: PHP 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> </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css"type="text/css" /> </head> <body> <div class='main'> <div class='header'>Updates to the site</div> <div style='margin-bottom:20px;'> <div class='subHeader' style='height:22px;'>Search for an update</div> <div class='dbItem' style='left:180px; width: 239px; float:left; height:22px;'> <form name="search" method="post" action="post"> <select name="Year"> <option>Year</option> <option>2005</option> <option>2004</option> <option>2003</option> <option>2002</option> <option>2001</option> <option>2000</option> </select> <select name="Month"> <option>Month</option> <option>January</option> <option>Febuary</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> </select> <input type="submit" name="Submit" value="Search" /> </form> </div> </div> <div style='margin-bottom:10px;'> <div class="link"><a href='#' class='links'>GO</a></div> <div class='dbdescripHeader'>Description of update</div> <div class='dbdescripItem'>First set of information from the database</div> <div class='dbHeader'>Number</div> <div class='dbItem'>one</div> <div class='dbHeader'>Date</div> <div class='dbItem'>10/01/01</div> </div> <div style='margin-bottom:10px;'> <div class="link"><a href='#' class='links'>GO</a></div> <div class='dbdescripHeader'>Description of update</div> <div class='dbdescripItem' >Second set of information from the database</div> <div class='dbHeader'>Number</div> <div class='dbItem'>two</div> <div class='dbHeader'>Date</div> <div class='dbItem' >10/01/01</div> </div> <div style='margin-bottom:10px;'> <div class="link"><a href='#' class='links'>GO</a></div> <div class='dbdescripHeader'>Description of update</div> <div class='dbdescripItem'>third set of infroamtion from the database</div> <div class='dbHeader'>Number</div> <div class='dbItem'>three</div> <div class='dbHeader'>Date</div> <div class='dbItem'>10/01/01</div> </div> <!-- End on the fly scripts --> </div> </body> </html> URLS css: http://pfwd.org.uk/style.css page: http://pfwd.org.uk/style/htm Can any one help me sus out the alignment issues? thanks pfwd HTML Code: <div id="nav"> <ul> <li class="first"><a title="#" href="#">About Company</a></li> <li><a title="#" href="#">RRR News</a></li> <li><a title="#" href="#">Apartment Communities</a></li> <li><a title="#" href="#">Commercial Properties</a></li> <li><a title="#" href="#">Current Developments</a></li> <li class="last"><a title="#" href="#">Resident Login</a></li> </ul> </div> CSS Code: /*** Main Navigation Styling ***/
#nav {
border-top: 1px solid #897409;
border-bottom: 1px solid #897409;
background:#fff url(../images/nav_off_back.jpg) repeat-x center;
height: 29px;
}
#nav ul{
font-size: 17px;
margin:0;
float:left;
text-align:center;
width:100%;
}
#nav li {
display:inline;
margin:0;
float:left;
list-style: none;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
min-height: 27px;
height: 27px;
line-height:27px;
padding:1px 0;
}
#nav li.first {
background:url(../images/nav_bars.gif) left center no-repeat;
padding-left:2px;
_margin-left:24px;
}
#nav li.first a,
#nav li.first a:link{
border-left:0;
}
#nav li.last {
border-right:1px solid #fff;
}
#nav li a {
color: #000;
text-decoration: none;
text-align:center;
min-height: 27px;
height:27px;
padding:6px 17px 6px 17px;
border-right:1px solid #b49f36;
border-left:1px solid #fff;
}
#nav li a:hover {
text-align:center;
background: url(../images/nav_on_back.jpg) repeat-y center;
color:#fff;
min-height:27px;
height: 27px;
padding:6px 17px 6px 17px;
}
This code produces a centered horizontal navigation menu in FireFox Mac and IE6 PC. However, in FireFox PC the whole menu is shifted a bit to the right off-center (about 15 px). In IE7 PC, the menu sits on the left and is not centered at all. I am willing to use a browser sniffer to fix the IE7 problem, but I'm not sure what to do for Firefox. The PC and Mac versions of Firefox usually play nice, but not this time. I'd rather not use both a platform AND browser sniffer, but I'm running out of ideas. The addition of a pixel-specific line-height for #nav li { helped some earlier issues, but did not fix them all. Is there any way to force a background color to print in all browsers or at least IE & FF? In the past I have just used an actual image; instead of a background color, but I was wondering if there was a 100% sure way to do this. I tried using media="print" and !import - neither of these worked. So if there is a will, place let me know the way. Hello All, I am having a bit of a problem with IE and fieldsets. I am not sure what exactly is going on. Take a look at this site in Firefox (I'm currently running version 3.5.2). You will see that it displays correctly. The site also displays correctly in IE8. I am now testing it against IE6/7. I have worked out most of the problems with it, but can not figure out what is causing this issue. The pages to look at are Board Members, Tech News, and Association. The link is: http://209.159.189.187/index.html One further, minor, issue that hopefully is simple involves the UL LI items on the About Us page. I used the reset css file to clear everything, and now whenever the LI item contains text that spans more than a single line, the second level does not indent itself to align with the first line. Like I said, it is a minor thing, but I would appreciate knowing what setting controls that. Thanks everyone. Hello! I am using some pretty simple css to format a form for my website. I really like the way using Fieldset & Legend allows for quick and easy formatting of the form but I have one small problem. When I give the fieldset a background it goes above the border of the legend and doesn't look right. I've seen forms that have worked around this problem but I'm not sure how. Any suggestions or help would be appreciated! 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">
<title>ALE Join Form</title>
<head>
<style type="text/css">
fieldset
{
border: 2px solid #87AFC7;
width: 50%;
background: #F5F5F5;
}
legend
{
color: #fff;
background: #87AFC7;
border: 1px solid #fff;
padding: 2px 6px
}
</style>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>ALE Membership</legend><br><br>
<!-- Provide a dropdown menu option field with sauces. -->
<input type="hidden" name="on0" value="Type">Type of Sauce
<select name="os0">
<option value="Select a type">-- Select a type --</option>
<option value="Red">Red sauce</option>
<option value="Green">Green sauce</option>
</select></p>
<br />
<!-- Provide a dropdown menu option field with prices. -->
<input type="hidden" name="on1" value="Size">Size
<select name="os1">
<option value="06oz">6 oz. bottle - $1.00 USD</option>
<option value="12oz">12 oz. bottle - $2.00 USD</option>
<option value="36oz">3 12 oz. bottles - $3.00 USD</option>
</select></p>
<br />
<!-- Display the payment button. -->
<input type="submit" name="submit" value="submit" /><br><br>
</fieldset>
</form><br><br>
<fieldset>
<legend>Thank You</legend>
<center>
<p>Your something is complete!</p><br>
</center>
</fieldset>
</body>
</html>
Below is a link to a terrible picture of the form (sorry it's not online): http://www.leadershipeducators.org/redesign/images/users/Jared/profile.jpg 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 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! 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 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, Hello, My pages all validate XHTML 1.0 Strict. My CSS Validates 2.1 ...except when I uploaded it then I get this error fives times: Parse Error opacity=0) Anyway, I thought by creating valid pages most browsers would render them correctly ----WRONGE! It seems IE 6 compresses my pages just enough to make the center column jump down under the two side columns, creating a big hole at the top. In IE 5.5 the pages look like a wild dog completely mangle them. FireFox can't seem to understand Javascript and my picture fader screen is blank and the Nav Bar is always on. Seems IE 7 is the only one who can get it right. Thank goodness for Microsoft! I was wondering how to resolve these problems. Seems I read somewhere that one could create different stylesheets for different browsers and use javascript to run them. I know nothing about javascript except how to paste it in. But I need someway to get my pages to work in FireFox and IE 6 at least. The name of the site is mybelovedangels dot com. Any Suggestions? Thanks 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;
}
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. 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;
}
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! 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 |
|||||||