|
CSS - How Can I Achieve Cross Browser Support For This Layout?
I've got the layout I want working in IE. I'd like to know how to make it work in all browsers. Mozilla seems to ignore the overflow setting for the docBody class.
I'll happily ditch the table if someone can tell me a better way to achieve the result I want. Here's the code Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
body
{
margin: 0;
padding: 0;
background: yellow;
overflow: hidden;
}
div
{
margin: 0;
padding: 0;
}
.pageContainer
{
width: 100%;
height: 100%;
border-collapse: collapse;
margin: 0;
padding: 0;
}
.header
{
height: 100px;
background: orange;
}
.docBody
{
height: 100%;
width: 100%;
overflow: auto;
background: black;
}
.docBodyColumns
{
margin: 0;
padding: 0;
width: 100%;
border-collapse: collapse;
}
.col1
{
width: 33%;
background: green;
padding: 10px;
}
.col2
{
width: 34%;
background: red;
padding: 10px;
}
.col3
{
width: 33%;
background: blue;
padding: 10px;
}
.footer
{
height: 60px;
background: aqua;
}
</style>
</HEAD>
<BODY>
<table class='pageContainer'>
<tr>
<td class='header' valign='top'>Header</td>
</tr>
<tr>
<td>
<div class='docBody'>
<table class='docBodyColumns'>
<tr>
<td class='col1' valign='top'>
Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1
</td>
<td class='col2' valign='top'>
Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2
</td>
<td class='col3' valign='top'>
Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class='footer' valign='top'>Footer</td>
</tr>
</table>
</BODY>
</HTML>
Similar TutorialsThis is frusteratung me so much... yet again I'm back because IE does not respond properly. Here is the page: tri-m.com/index_jan_newFproduct.html Please don't tell me I should validate first because I know validating is not the problem here and I will be validating after I fix this. The problem is in the Join the Mailing List section. The image behind the form field moves when you restore down from being maximized and you resize the page up and down. In IE the image moves but in FF the image is static. The solution is probally quite simple but I'm so flustered right now that I'm not able to come up with the solution. If someone could help me that would be wonderful and greatly apperciated. - Jacenta I am working on a header for a site and am having trouble with cross-browser support for one element. I have kept all of the CSS in the html page for testing purposes. The problem I'm having is that in FF and IE6, I am having difficulty getting the #menuBar, .filmstripTop, #menuChoices, and .filmstripBottom elements to align on top of each other, despite margins, padding, etc. set to 0. (I have set the background of #menuBar to yellow so you can see what I think is the offending element.) In FF and IE6, I see the yellow running across the screen but in different places. In IE running under Windows Vista, everything appears aligned as intended. (The menu text is just a placeholder for the navbar I will do once the other formatting is fixed.) I'm sure this must be an easy fix and something I've overlooked, but I have been at this for hours and can't seem to figure out how to make this work. Suggestions? Thanks! url: http://www.bonvoyageimagery.com Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
body {
border: 0 0 0 0;
margin: 0 0 0 0;
background: #000;
color: #FFF;
}
#header {
background: url(images/LogoBackgroundGradient.jpg) repeat-x;
text-align: center;
margin: 10px 0 0 0;
padding: 0 0 0 0;
}
.imgBorderHeader {
border: 2px solid #888;
}
#menuBar {
clear: both;
border: 0 0 0 0;
padding: 0 0 0 0;
margin: -4px 0 0 0;
background: yellow;
}
.filmstripTop {
border: 0 0 0 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 12px;
width: 100%;
clear: both;
background: url(images/FilmstripTop-8x12.jpg) repeat-x;
}
.filmstripBottom {
border: 0 0 0 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 12px;
width: 100%;
clear: both;
background: url(images/FilmstripBottom-8x12.jpg) repeat-x;
}
#menuChoices {
width: 100%;
clear: both;
border: 0 0 0 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center;
background: #362217;
color: white;
}
#menuChoices p {
font-size: .75em;
font-family: Arial;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="header">
<img border="0" src="images/Logo2.jpg" style="padding-right: 70px;" width="280" height="125">
<img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=1035223&Size=Th" width="100" height="100" hspace="10" align="top" style="margin-top: 10px; margin-bottom: 10px" />
<img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=1035171&Size=Th" width="100" height="100" hspace="10" style="margin-top: 10px; margin-bottom: 10px" align="top" />
<img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=1035174&Size=Th" width="100" height="100" hspace="10" style="margin-top: 10px; margin-bottom: 10px" align="top" />
<img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=2645154&Size=Th" width="100" height="100" hspace="10" style="margin-top: 10px; margin-bottom: 10px" align="top" />
</div>
<div id="menuBar">
<div class="filmstripTop"></div>
<div id="menuChoices">
<p>Home Destinations Themes Specialty Calendars Browsing and Ordering Customer Care</p>
</div>
<div class="filmstripBottom"></div>
</div>
</body>
</html>
Hey Everyone, I am having trouble getting firefox to behave with a css3 button I have. It's mainly the linking of it but also the style gets out of whack in FireFox. It works perfect in chrome and in safari. Here is the link http://pt11.*******com/index2.php?x=videos.html Hey Peeps, A lowly whitebelt needs help. I'm working with a layout and I just can't seem to get one last part to display correctly: the footer. I've been racking my brain over it. Just can't get 'er done. Need some help from you seasoned pros, if you're willing to help out a neophyte. The layout displays great, just as I want it, in FF, Mozilla, Netscape, and Opera (essentially all mozilla browsers). There's extra space when using Maxthon or Avant, and, OF COURSE, it's totally jacked in IE. (Have been able to test on a Mac yet - but I'm sure safari will be another issue all together). Please Help!! The layout itself is visible at http://www.indecles.com/development/test2/ The style sheet is available at http://www.indecles.com/development/test2/indecles.css NOTE: a footer is obvious, but just in case, I've change the background color of the div in question to fire engine red, so there is no confusion. There is also a little Javascript thing going on in the index page, so try to take a look at that too. Thanks a ton in advance to anyone willing to try and help out. I'm creating a new website, but it's not my field of expertise so i really need some help with CSS menus. I've integrated a drop down menu into the front page and the gallery menu into gallery page Gallery seems to be working fine in firefox 3, but in IE6 it's a bit messed up. With front page i dont have any more patience to work on it. Please help!, I can offer a compensation for that. With my limited knowledge of css, html, etc. I can mold my page to look just the way I desire on my given screen size (1280x1024) and browser (mozilla) but can not seem to get a fix for all variables (1024x768, etc.). I've tried containing divs & percents and a few other solutions to no avail. Just want to know if you guys know any quickfix or a recommended strategy in tackling this issue going further. id post code here, but the site wont allow it due to external links. so please check it out here and let me know http://needaputer.com css is at same url just located at .com /css/styles.css my goal: -- auto center content on page horizontally - (based on screen size - cross browser compatible) -- make sure header and footers are absolute top and bottom of page always (based on page size and cross-browser compatible) -- toggle "page zoom" for entire page via buttons (if needed and possible to adjust content for each screen size) I need to create the following layout using divs/css, but I can't figure out how to do it. Can anyone help me, please? Thanks, Gary Code: <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> <table cellspacing="0" cellpadding="0" border="0" width="760" height="100%"> <tr height="420"> <td width="600"></td> <td width="160" bgcolor="green"></td> </tr> <tr> <td width="600"></td> <td width="160" bgcolor="yellow" valign="bottom">This text is aligned to the bottom of the window, and moves up with the bottom of the window but only as far as the green block.</td> </tr> <tr height="20"> <td width="600"></td> <td width="160" bgcolor="yellow"></td> </tr> </table> A demo of this page is here , so you can see what it does. Many thanks, Gary I viewed several examples of use of CSS filters like blur wave mask etc with various browsers but none reflected the changes, how come ? Hi- I need to know if IE 5, IE 6 or IE7 are considered standards-compliant and do any of them support fully CS2 and strict standards? Thanks in advance- S 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 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;
}
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! Okay, I'm about 6 steps into an effort to redo a section of my site... And while I swear I started out using a DIV/CSS based layout that worked in ALL browsers suddenly that is no longer the case. What I'm trying for is a navigation bar that stays fixed to the left... to the right of it are esentially 4 stacked areas: 1) the top header should stay glued to the top. 2) a middle content area that should flex reletive to the things around it 3) the second-from the bottom thing stays glued to the bottom, but has a bottom margin to place it above the footer. 4) the bottom footer should stay glued to the bottom. It works in all of my Mac browsers (Safari, Firefox, IE) as well as Firefox for windows. But IE 6.x for Windows insists on displaying all of the right-side elements way down the page... below the end of the left navigation. I simply can not force it to float/wrap to the right. Here is what I've got: http://digipix.jeffntom.com/TEMPLATE_UI-5.php Ignore the whiz-bang JavaScript stuff displaying the images, etc... and help me figure out what's up with my DIV/CSS? Here is the Div structu html4strict Code: Original - html4strict Code <div id="leftnav"> ...leftnav stuff... </div> <div id="rightbody"> <div id="header"> 1) Right-Top: ...header area... </div> <div id="content"> 2) Right-Middle: ...large image area... </div> <div id="thumbnails"> 3) Right-Lower: ....image thumbnail area... </div> <div id="footer"> 4) Right-Bottom: ...footer area... </div> </div> <div id="leftnav"> Here is the CSS: css Code: Original - css Code #leftnav { margin: 0; padding: 0; position: fixed; top:0px; width: 200px; bottom: 1px; // this locks the div to the browser bottom (minus 1px) float: left; background:#cccccc; valign: bottom; } /* this is a container that holds everything except the left navitation */ #rightbody { /* width: 100%; */ } #header { position: fixed; top: 0px; margin-left: 212px; margin-right: 0px; background: #ffffff; } #content { margin-top: 60px; margin-left: 212px; margin-right: 0px; background: #ffffff; } #thumbnails { position: fixed; bottom: 51px; margin-left: 210px; margin-right: 10px; background: #ffffff; } #footer { position: fixed; bottom: 0px; margin-left: 200px; margin-right: 10px; background: #ffffff; }
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 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 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, |
|||||||