|
CSS - <br /> Layout Problems: Cross Browser
Similar TutorialsI'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. 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'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>
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 I'm having a few related problems... 1. I want the Flash picture slideshow centered vertically and horizontally in its div id="flashbox", when viewed in IE 6 & 7. 2. Also when viewed in IE 7 the graphic buttons in the div id="topright" are overlapping text in the div id="rightcolumn" 3. And finally, the the graphic buttons in the div id="topright" do not fill up their space at the bottom when viewed in IE 6 & 7. Any ideas on any of these issues is much appreciated. Thank you in advance. The link to the page in question is: http://www.oharenoise.org/new/index.htm 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) http://64.232.240.200/new.html This site works well in Mozilla. There are spacing discrepancies between loads with Mozilla and latest Internet Explorer. The space under headings in the Main section differs between them, and there are gaps in the newsboxes where the background image runs uninterrupted on Mozilla. Internet Explorer Mac v5 does horrible things as can be seen in <a href="http://64.232.240.200/mac_ie5_screen.jpg">this screenshot</a>. (Colors have been changed slightly since this screenshot was taken, but you get the idea.) Any help is appreciated. I have been developing some dropdown menus loosely based on Patrick Griffiths "Suckerfish" example (see http://www.alistapart.com/articles/dropdowns/) and I have a prototype mostly working. The code is simple and is included in full below. However I see two problems with this that I can't sort out. First, in IE (6.0.2800) the dropdown is offset significantly from the left edge of the upper menu cell. In Mozilla (1.7.5) it's fine. I can't figure out why -- any ideas? I want it right underneath, not offset. Also, in Mozilla the dropdowns have a 1-pixel space at the right edge between the background and the border. Also a mystery ... Thanks for any comments / thoughts. Tom ======================================================== Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
font-family: arial, helvetica, serif;
background: white url(images/ddbg3.gif) no-repeat 6000px 6000px;
margin-left: 1em;
}
.mainlist {
list-style: none;
padding: 0;
margin: 0;
}
.mainitem {
float: left;
position: relative;
width: 120px;
text-align: center;
cursor: hand;
padding: 0;
border-top: 1px solid green;
border-left: 1px solid green;
border-bottom: 1px solid green;
}
.mainitem a {
font-weight: bold;
color: green;
text-decoration: none;
}
.mainitemlast {
border-right: 1px solid green;
}
.mainlist li:hover ul {
display: block;
left: 0;
}
li.over ul {
display: block;
left: 0;
}
.sublist {
display: none;
position: absolute;
float: left;
top: auto;
font-weight: normal;
background-color: #CCCCFF;
width: 150px;
padding: 0;
}
.subitem {
display: block;
float: left;
position: relative;
left: 0;
width: 100%;
border-top: 1px solid blue;
border-left: 1px solid blue;
border-right: 1px solid blue;
}
.subitemlast {
border-bottom: 1px solid blue;
}
.subitem a {
display: block;
font-weight: normal;
color: #060;
padding: 5px;
}
.subitem a:hover {
background-color: #EEEEFF;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
</head>
<body>
<div id="content">
<br>
<ul class="mainlist" id="nav">
<li class="mainitem">
<div><a href="">Option 1</a></div>
<ul class="sublist">
<li class="subitem"><a href="">Subitem 1</a></li>
<li class="subitem"><a href="">Subitem 2</a></li>
<li class="subitem"><a href="">Subitem 3 is longer</a></li>
<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
</ul>
</li>
<li class="mainitem">
<div><a href="">Option 2</a></div>
<ul class="sublist">
<li class="subitem"><a href="">Subitem 1</a></li>
<li class="subitem"><a href="">Subitem 2</a></li>
<li class="subitem"><a href="">Subitem 3 is longer</a></li>
<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
</ul>
</li>
<li class="mainitem mainitemlast">
<div><a href="">Option 3</a></div>
<ul class="sublist">
<li class="subitem"><a href="">Subitem 1</a></li>
<li class="subitem"><a href="">Subitem 2</a></li>
<li class="subitem"><a href="">Subitem 3 is longer</a></li>
<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
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 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 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 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. 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;
}
What do you use for Cross Browser Testing? I just came across BrowserCam ($25 per year) at fundable.org. Do you recommend it? thank you. Dr. Mk. 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 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'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? 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 |
|||||||