|
CSS - Css Crossbrowser Problem
hi,
can anybody tell me that how can i will make following css styles to be viewed same in both internet explorer and mozilla explorer(cross browser compatibility). here is my code thanks mrjameer <style type="text/css"> html, body { margin: 0px; padding: 0px; border: 0px;background: url(bg1.gif)repeat-x; background-color:#66CCFF; } #navcontainer ul { padding-left : 0; margin-left : 80px; margin-top:20px; background-color : #036; color : #FFFFFF; float : left; width : 73.2%; font: 100% tahoma;line-height: 1.7; } #navcontainer ul li { display : inline; } #navcontainer ul li a { padding : 0.2em 1em; background-color : #036; color : #ffffff; text-decoration : none; float : right; border-right : 1px solid #fff; } #navcontainer ul li a:hover { background-color : #369; color : #fff; } #header { margin-left : 80px; margin-top : 0; float:left; } #right { position : relative; height : 779px; width : 267px; float : right; margin-right:72.3px; background-color : #ffffff; margin-top : -8px; color:#000000; font: 100% tahoma; background-image: url(h2.jpg); background-repeat: repeat-x;} #left1 { position : absolute; /*right : 155px; */ margin-right:400px; margin-top : -8px; margin-left:160px; height : 230px; width : 564px; float : left; font: 100% tahoma; /*background-color : #FFFFFF; */ color:#23238e; background-image: url(a1.jpg); background-repeat: repeat-x;} #left2 { position : absolute; /*right : 155px; */ margin-right:400px; margin-top :221px; margin-left:160px; height : 296px; width : 564px; float : left; font: 100% tahoma; background-color : #e6e6e6; color:#000000; background-image: url(a2.jpg); background-repeat: repeat-x;} #about_imgtable { width:218px; margin-left:50px; margin-top:8px; position:relative; /*margin:auto;*/ /*border:1px dotted navy;*/ border-style:groove; padding:1px; border-color:#006400; clear:right; border-width:2px; color:#ffffff; background-image: url(hostingbg.jpg); background-repeat: repeat-x; } #about_img { float:left; padding:0 10px; margin-top:5px; } #about_right_text { display:table-cell; } #product_imgtable { width:220px; margin-left:300px; margin-top:-158px; position:relative; /*margin:auto;*/ /*border:1px dotted navy;*/ border-style:groove; padding:1px; border-width:2px; border-color:#006400; background-image: url(tutorialsbg.jpg); background-repeat: repeat-x; color:#ffffff; } #product_img { float:left; padding:0 10px; margin-top:5px; } #product_right_text { display:table-cell; } #community_imgtable { width:470px; margin-left:50px; margin-top:14px; position:relative; /*margin:auto;*/ /*border:1px dotted navy;*/ padding:1px; border-style:groove; clear:right; border-color:#006400; border-width:2px; background-image: url(toolsbg.jpg); background-repeat: repeat-x; color:#ffffff; } #community_img { float:left; padding:0 10px; margin-top:5px; } #community_right_text { display:table-cell; margin-top:10px; } #left3 { position : absolute; /*right : 155px; */ /*margin-right:500px;*/ margin-top :517px; margin-left:160px; height : 291px; width : 285px; float : left; font: 100% tahoma; background-color : #ffffff; color:#000000; background-image: url(a3.jpg); background-repeat: repeat-x; } #lo { width:260px; height:200px; margin-left:10px; margin-top:40px; position:relative; /*margin:auto;*/ /*border:1px dotted navy;*/ padding:1px; background-image: url(greens.gif); background-repeat: repeat-y; color:#ffffff; border-styleutset; border-color:#ff69b4; } #login { margin-left:100px; margin-top:30px; } #offline { margin-left:40px; margin-top:30px; } #left4 { position : absolute; /*right : 155px; */ /*margin-right:500px;*/ margin-top :517px; margin-left:445px; height : 291px; font: 100% tahoma; width : 279px; float : left; background-color : #ffffff; color:#000000; background-image: url(a4.jpg); background-repeat: repeat-x; } #shamroc_imgtable { width:260px; height:190px; margin-left:10px; margin-top:5px; position:relative; /*margin:auto;*/ /*border:1px dotted navy;*/ padding:1px; background-image: url(scriptsbg.jpg); background-repeat: repeat-x; color:#ffffff; border-styleutset; border-color:#FF69B4; } #shamroc_img { float:left; padding:0 20px; margin-top:5px; } #shamroc_right_text { display:table-cell; word-spacing:5px; } #blank_footer { width : 831px; clear : both; height : 150px; background-color : #6f636b; font: 100% tahoma; color : #000066; text-align : center; position : absolute; margin-left : 160px; background-image: url(a5.jpg); background-repeat: repeat-x; color:#ffffff; } #footer { width : 831px; clear : both; height : 150px; background-color :#ffffff; color : #000000; text-align : center; position : absolute; margin-left : 160px; margin-top:150px; font: 100% tahoma; background-image: url(g.jpg); background-repeat: repeat-x; } </style> Similar TutorialsI am currently workin on a new design for my site and have decided to go tabless (the way it should be). I have gotten pretty much as far as I can apart from adding the content. I have been testing my design in both IE6 and FireFox 1.0.4. I have noticed some problems in width in both browsers. Here is the link to my site: Panik Design's New Layout In IE6 the main div does not stretch out to 700px, It only lines up with the header div when i change the width to 704px. But when I do that , Firefox is then out of line because Firefox measured it correctly the first time. As for Firefox problem. FF is not measuring the module widths correctly. They are set to 150px and would like them to display like they do in IE6. I will now post my code: Code:
<html>
<head>
<title>Panik Designs</title>
<style type="text/css">
body {
margin: 0px;
background: #fff;
color: #000;
font-size: 10pt;
font-family: verdana;
}
h1 {
font-family: verdana;
color: #000;
font-weight: bold;
font-size: 24pt;
}
#header {
border-left: 2px solid #000;
border-right: 2px solid #000;
background: #FBF2D9;
width: 700px;
margin: 0;
}
#main {
position: relative;
width: 700px;
border-left: 2px solid #000;
border-right: 2px solid #000;
height: 100%;
background: #FBF2D9;
}
#leftcontent {
position: absolute;
padding-top: 10px;
left: 0px;
background: #FBF2D9;
width: 150px;
text-align: center;
}
#rightcontent {
position: absolute;
padding-top: 10px;
right: 0px;
background: #FBF2D9;
width: 150px;
}
#centercontent {
position: absolute;
left: 150px;
padding: 10px;
background: #FBF2D9;
width: 400px;
text-align: left;
}
#moduletop {
position: relative;
width: 140px;
padding: 5px;
color: #fff;
font-weight: bold;
text-align: center;
border: 1px solid #000;
background: #26476C;
}
#modulebottom {
position: relative;
width: 140px;
padding: 5px;
color: #fff;
font-weight: bold;
text-align: left;
font-size: 10pt;
border: 1px solid #000;
border-top: 0px;
background: #4184B4;
background-image: url("images/modulefill.jpg");
background-position: 0% 100%;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<center>
<div id="header"><img src='images/header.jpg'></div>
<div id="main">
<div id="leftcontent">
<div id="moduletop">: Navigation :</div>
<div id="modulebottom">
Item one<br>
Item two<br>
Item 3<br>
</div>
This is the left content
</div>
<div id="centercontent"><h1>Heello</h1><br>Thisis where the center content will go. blah blah blabh blah all of this is fun fun fun i like cheese.</div><div id="rightcontent"><div id="moduletop">: Statistics :</div>This is the right Content</div>
</div>
</body>
</html>
I have not added a doctype because it adds even more problems to the page. As shown on this page: Doctype problems: Doctype problems I'm currently working on a rather challenging development (at least for me) and trying to resolve some CSS strangeness that I can't track down the root of. The basic design is working out... or was until I started checking for cross-browser compatibility. Currently: It looks good/works in Safari/Gekko and IE5Mac. The top of the page draws correctly in Firefox/Netscape/Mozilla, but the content areas are white rather than showing through to the Faux-columns below (I even tried setting redunant background: transparent on the divs to see if it was a parenting bug) Opera 7+ looks pretty much right, except it is adding a 15px margin to the top of the body of the page (before the viewport) that no other browser is adding. I haven't even seen it in IE5/6 Win, but I'm pretty sure it's screwed there. If anyone is particular familiar with one of these issues, I'd greatly appreciate it if you could point me in the right direction of an article or point out a chunk of my code that doesn't make sense or is causing the error. The template page is here. The CSS document can be seen here. Thanks in advance to anyone who has time to assist. -- Aiden Hi guys I've this code, it looks fine in IE (damn..) but it does not look in Firefox Code:
body {
scrollbar-track-color: #D8AFAF;
scrollbar-face-color: #660000;
scrollbar-highlight-color: #927373;
scrollbar-3dlight-color: #663333;
scrollbar-shadow-color: #660000;
scrollbar-darkshadow-color: #660000;
scrollbar-arrow-color: #FF0000;
}
What's wrong ? - my Firefox version (1.0.1) - the css code ? thanks Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello everyone, I am hoping I could get some help on this. I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that. So, the issue lies within this example page: tinyurl.com/rediculouswebsite The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox. I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue. Thank you all very much. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! Hello everyone, for our intranet I have developed new application tools with tabs to change icons. it is working fine on IE7+ but having problem with IE6. there are two divs in this applications and on IE 7+ both divs starts in new line. for some reasons in IE6 it comes in one line. what cna I put in the second div that will make it appear on new line. I have tried putting <p> tag but doesn't make any different. Any suggestions. thank you. <div id="mytabsmenu" class="tabsmenuclass"> <span style="cursorointer"> <ul> <li><a rel="gotsubmenu[selected]">Trust Applications</a></li> <li><a rel="gotsubmenu">General Applications</a></li> </ul> </span> </div> <div id="mysubmenuarea" title="Applications Toolbar" align="center" style=" background-image:url(/templates/default/IconImages/iconBkgrd.jpg); background-position:top; background-repeat:no-repeat; margin:2px; padding-top:12px; padding-left:30px; vertical-align:bottom; height:50px;"> <!--1st link within submenu container should point to the external submenu contents file--> <a href="/templates/default/js/submenucontents.htm" style="visibility:hidden">Sub Menu contents</a> </div> Hi, I am having an issue using my CSS code, I have a drop down section on my menu bar on my site. I'm trying to firstly just set the background of the whole bar, Code:
#nav-m {
font: normal 12px Verdana;
font-weight: bold;
width: 100%;
}
#nav-m ul {
float: left;
left: 0;
padding: 2px 0;
text-decoration: none;
text-indent: 5px;
}
#nav-m a {
display: block;
width: 10em;
w\idth: 6em;
color: #012345;
text-decoration: none;
padding: 0.25em 2em;
}
#nav-m a.daddy {
}
#nav-m li {
float: left;
padding: 0;
background-image: url(http://taxbusters.eu.com/images/nav-bar1.jpg);
background-repeat: no-repeat;
}
#nav-m li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#nav-m li li {
padding-right: 1em;
width: 13em
}
#nav-m li ul a {
width: 13em;
w\idth: 9em;
}
#nav-m li ul ul {
margin: -1.75em 0 0 14em;
}
#nav-m li:hover ul ul, #nav-m li:hover ul ul ul, #nav-m li.sfhover ul ul, #nav-m li.sfhover ul ul ul {
left: -999em;
}
#nav-m li:hover ul, #nav-m li li:hover ul, #nav-m li li li:hover ul, #nav-m li.sfhover ul, #nav-m li li.sfhover ul, #nav-m li li li.sfhover ul {
left: auto;
}
#nav-m li:hover, #nav-m li.sfhover {
background: #bdd7e6;
}
however the background doesnt show up, and the font alignment isnt right, - there are so many problems http://alturl.com/nfkp Check this url > http://tinyurl.com/26lfqk with mozilla or ie7 and you will see that is ok... if i use ie6 the left menu is moving down... can anybody help me? the css is Code: /* Hot Property's CSS File */
#hp_con1 {
}
/****** Global Containers ******/
#con_global {width: 98%;}
/****** Headings ******/
#heading_Agent, #heading_Co, #heading_Prop, #heading_Type, #heading_Types, #heading_Featured, #heading_Search, #heading_AdvSearch, #heading_Co_Contact, #hp_view_agent_title, #hp_view_agent_contact, #hp_ManageProp, #hp_EditProp
{
font-size: 12px;
font-weight: bold;
color: #616161;
background-color: #FFFFF1;
margin-bottom: 0px;
text-align: left;
padding-left: 7px;
padding-top: 2px;
padding-bottom: 2px;
border: 1px solid #D8D8D8;
}
/****** Borders ******/
#hp_view_agent_con, #hp_emailform_con, #hp_searchresult_con, #hp_view_co_con {
background-color: #2C3336;
border-bottom: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
padding: 10px;
text-align: left;
}
/****** Features ******/
#hp_view_features_title {
font-size: 16px;
font-weight: bold;
color: #616161;
text-decoration: underline;
margin-top: 16px;
margin-bottom: 6px;
}
/****** Featured ******/
#con_featured1 { }
/****** Search ******/
#con_search1 { }
#con_search2 { }
#con_asearch1 { }
#con_asearch2 { border-left: 1px solid #D8D8D8; border-right: 1px solid #D8D8D8; border-bottom: 1px solid #D8D8D8; background-color: #2C3336}
.hp_asearch_row0 { background-color: #2C3336; }
.hp_asearch_row1 {background-color: #2C3336; }
#con_sort1 {
width: 120px;
text-align: left;
display: inline;
}
#con_sort2 {
text-align: right;
display: inline;
width: 370px;
}
#con_sort {
background-color: #2C3336;
padding: 5px 5px 5px 7px;
margin-bottom: 6px;
border-bottom: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
}
/****** Search - Page Counter ******/
#hp_search_pagecounter_top {
margin-top: 10px;
text-align: center;
}
#hp_search_pagecounter_bottom, #hp_pagecounter_bottom {
margin-top: 5px;
text-align: center;
padding: 6px;
background-color: #2C3336;
border: 1px solid #C0C0C0;
display: block;
}
/****** Front Page - Types******/
#con_types1 { }
#con_types2 { }
.con_types3 {
float: left;
width: 50%;
vertical-align: top;
padding: 5px;
text-align: left;
}
/****** Listing ******/
#list_agents, #list_searchresults, #list_properties, #list_featured {
margin-top: 15px;
text-align: left;
}
/****** Listing - Property ******/
#hp_icons {
text-align: right;
padding-top: 5px;
}
.hp_prop {
width: 100%;
display: block;
float: left;
text-align: left;
margin-bottom: 10px;
}
.hp_details {
width:50%;
vertical-align: top;
padding-left: 8px;
float: left;
}
/****** Type ******/
#con_type1 { }
.types_desc {
margin-top: 3px;
margin-bottom: 5px;
}
/****** Company ******/
.hp_view_co { }
#hp_view_co_photo {
float: left;
margin-right: 12px;
}
#hp_view_co_details {min-height: 170px;}
#hp_caption_coname {
font-size: 16px;
font-weight: bold;
text-decoration: underline;
}
/****** Property ******/
#con_hp1 { }
#con_hp2 { }
.hp_view_details {
font-size: 13px;
vertical-align: top;
padding-left: 7px;
padding-top: 10px;
text-align: left;
border:0px solid #C0C0C0;
line-height: 20px;
}
#standard_photo { }
#hp_view_intro_text {
line-height: 15px;
margin: 7px 0px 0px 0px;
}
#hp_view_full_text {
line-height: 15px;
margin: 7px 0px 0px 0px;
}
.hp_caption {font-weight: bold;}
.hp_price {color: #CE1400; font-size: 13px;}
/****** Property -Photo ******/
#hp_view_standard_photo_con1 {
text-align: center;
background-color: transparent;
margin: 10px;
}
#hp_view_standard_photo_con2 {
text-align: center;
float: center;
margin: 0px 20px 0px 20px;
width: 300px;
background-color: #2c3336;
padding: 1px;
}
#hp_view_standard_photo_con3 {
text-align: center;
width: 80;
background-color: #2c3336;
}
#hp_view_standard_photo_con4 {padding: 5px;}
#hp_view_standard_photo_title {font-weight: bold; color: white;}
#hp_view_standard_photo_desc {
}
.hp_view_thumb_con {
height: 120px;
display: table;
padding: 0px 5px 10px 0px;
margin-left: auto;
margin-right: auto;
}
.img_thumb {
width:120px;
vertical-align: top;
float: right;
text-align: center;
padding: 0px;
margin: 1px 1px 1px 10px;
border: 0px solid #C0C0C0;
}
ul.thumb {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
width: 485px;
list-style: none;
}
ul.thumb li {
text-align: center;
float: left;
margin: 1em;
list-style-image: none;
background-color: #c0c0c0;
}
ul.thumb li a {
text-decoration: none;
color: #00f;
}
ul.thumb li a img {
}
/****** List ******/
.olist { list-style-type: disc; margin: 3px 0px 0px 15px; padding: 0px; text-align: left;}
.olist li {
padding: 0px; }
/****** Agent ******/
#hp_view_agent_photo {
padding: 5px;
display: inline;
float: left;
margin-right: 12px;
}
#hp_view_agent_details {padding: 5px;}
.hp_view_agent {
font-size: 13px;
text-align: left;
}
#hp_view_agent_desc {
margin: 10px 10px 0px 10px;
}
#hp_caption_agentname {
font-size: 16px;
font-weight: bold;
text-decoration: underline;
}
/****** Address ******/
#hp_view_addr, #hp_co_addr {
margin: 6px;
font-size: 11px;
line-height: 15px;
}
/* Links */
a.hp_title:link, a.hp_title:visited {
font-size: 15px;
color: #CE1400;
font-weight: bold;
text-decoration: underline;
}
a.types_title:link, a.types_title:visited {
font-size: 15px;
font-weight: bold;
text-decoration: underline;
}
/* Types List of Hot Property */
.types_hp { margin: 3px 0px 0px 0px; padding: 0px; text-align: left;}
/* misc */
.clearboth {clear: both;}
/* Error - Empty, no property */
#hp_error_empty {text-align: center;}
The problem is with the two small images , all other pages are ok ( even the same page for another property, if there are two or more pics the problem appears. e.g http://tinyurl.com/yvvwqy ) I have created a nav bar with css using the widely distributed '<ul>' coding. The problem I am having I think is with the anchor tags. The look of the nav bar is fine but depending on the float position the anchor tag immediately next to it won't follow the css. Here is the css.. body { margin:0; padding:0; } div.container { text-align:center; } div.center { margin-top:20px; margin-left:auto; margin-right:auto; width:800; text-align:left; } div.left { float:left; width:100; height:500; background-color:#007700; } div.right { float:right; width:130; height:500; background-color:#e8e8e8; font-size:10pt; } div.header { clear:both; width:40%; } div.footer { clear:both; margin:0; width:100%; } ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a.topmenu { float:right; width:5em; height:2em; text-decoration:none; color:#005500; background-color:#e8e8e8; padding:0.2em 0.6em; border-right:1px solid #005500; } a.topmenu:hover { background-color:#005500; color:#e8e8e8; } a.topmenu:visited { float:right; width:5em; text-decoration:none; color:#005500; background-color:#e8e8e8; padding:0.2em 0.6em; border-right:1px solid #005500; } li { display:inline; } a.leftmenu { color:#ffffff; text-decoration:none; } a.leftmenu:hover { color:black; } a.leftmenu:visited { color:#ffffff; text-decoration:none; } and here is the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="newstyle.css"/> </head> <body> <div class='container'> <div class='center'> <img src="fdat_logo_short.jpg" width=250 /> <ul> <li><a class='topmenu' href="contact.php">Contact Us</a></li> <li><a class='topmenu' href="about.php">About Us</a></li> <li><a class='topmenu' href="services.php">Services</a></li> <li><a class='topmenu' href="news.php">News</a></li> <li><a class='topmenu' href="home.php">Home</a></li> </ul> </div> </div> </body> </html> Hi i have built a navigation system with css controled list, with dropdown effects that works well in both IE6 and FF 1.5 but the problem is that in FF the menu bar is not taking all the space that it is given to him (750px) on the right end of the menu navigation bar there is a white space that i can't get ride of. The navigation bar background is orange! In IE there is no problem the entire navigation bar is Orange, but in FF there is 6px white space on the right end! here si the code, i have added background almost everywhere to make taht space the same color as the rest of the menu but it doesn't help! CSS Code:
/* Positionning & Structure of 1st Level Menu */
#navigation {
margin: 0;
padding: 0;
list-style: none;
width: 750px;
display: block;
background-color: #DA5D09;
}
/* Positionning & Structure for Sub-Menus */
#navigation ul{
display:block;
/*margin:0;*/
padding:0;
list-style: none;
margin: 0;
background-color: #DA5D09;
border-style: solid;
border-color: #fff;
border: 1px;
}
#navigation li ul {
position: absolute;
top: 173px;
display: none;
}
/* Structure for 1st level Menu Items */
#navigation li {
list-style: none;
width: 124px;
height: auto;
display: block;
float: left;
margin: 0;
padding: 0;
background-color: #DA5D09;
}
/* Structure for Sub-Menu Items */
#navigation li li {
display: block;
float: none;
margin: 0;
padding: 0;
list-style: none;
width: 124px;
}
/* Styles for 1st level Menu Items */
#navigation li a{
text-align: center;
background: #DA5D09;
border-width: 0 2px 0 0;
border-color: #fff;
border-style: solid;
color: #fff;
font-size: 11px;
font-weight: bold;
display: block;
text-decoration: none;
padding: 10px 0;
margin: 0;
}
/* Styles for Sub-Menu Items */
#navigation li li a{
text-align:left;
background: #DA5D09;
border-width: 1px 0 0 0;
border-color: #fff;
border-style: solid;
font-size: 10px;
display: block;
text-decoration: none;
padding: 5px;
margin: 0px;
}
/* The magic */
#navigation li:hover ul, #navigation li.over ul { display: block; }
The XHTML Code: <ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a>
<ul>
<li><a href="#">Muzik News</a></li>
<li><a href="#">Interviews</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</li>
<li><a href="#">Lifestyle</a>
<ul>
<li><a href="#">Urban reports</a></li>
<li><a href="#">Style & Gear</a></li>
<li><a href="#">Sports Corner</a></li>
</ul>
</li>
<li><a href="#">Community</a>
<ul>
<li><a href="#">Forums</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</li>
<li><a href="#">Muzik</a>
<ul>
<li><a href="#">Muzik Lounge</a></li>
<li><a href="#">Online Radios</a></li>
</ul>
</li>
<li><a id="lastright" href="#">Muzik Store</a></li>
</ul>
The navigation UL is included in a global div (that contains the entire page) of 750 px as well! I am a real newbie with css based design so you might notice my code is not very logic all the time and has a lot os redundancy but at least i am trying to convert to this new paradigm! Thx in advance for the help! Hello, I'm new here and to CSS too. I've tried to fix this bug I had for a while, but haven't found any decent answers. My problem resolves around this page : http://www.dessinsdrummond.com/house_plans_collection.html In IE, the page seems to appear correctly, however, in Firefox, the white DIV doesn't follow the content of my page, thus the layout doesn't appear very well... I'm guessing it is because the float property is set... I wonder if there is any ways to fix this problem. Thanks! Hello all, Apologies to be asking for help on my first post, but I've scoured the internet looking for what is probably a quick fix but without the terminology I'm losing hours - time to ask for help! my site is englas.pl and in forefox it's fine. In ie8 it seems to be fine as well, the problem is with ie 6&7. The CSS validates according to the w3c site. (Sorry, can't add urls as i'm a new user) ie6&7 'cuts' off the bottom section of text where the container meets menu-bottom-bkg. At least this is what is visibly the case when you look at the webpage. The custom div look like this: #container { background: #FFF url(../images/bkg_container.png) repeat-y; min-height: 100%; width: 1190px; margin: 0 auto; padding: 0 14px 0 14px; } #header { background: url(../images/bkg_header.png); height: 127px; width: 1160px; margin: 0; padding: 15px 0 0 30px; } #menu-top-bkg { background: url(../images/bkg_menu_top.png) no-repeat left top; height: 128px; width: 1190px; margin: 0 0 -128px 0; } #wrapper { overflow: auto; background: url(../images/bkg_menu.png) repeat-y left; min-height: 500px; width: 1190px; margin: 0; padding: 0; } #menu { float: left; background: none; min-height: 370px; width: 159px; margin: 0; padding: 110px 0 0 0; } #content { float: right; background: url(../images/bkg_content.png) no-repeat right top; min-height: 400px; width: 763px; margin: 0 0 0 25px; padding: 15px 243px 10px 0; } #menu-bottom-bkg { background: url(../images/bkg_menu_bottom.png) no-repeat; height: 141px; width: 1190px; margin: -111px 0 0 0; } #footer { background: url(../images/bkg_footer.png); height: 100px; width: 1190px; margin: 0; padding: 16px 0 0 0; } I've gone through the html and i can't find any evidence of it being this, so i'm hoping that the css work above doesn't comply with something in the ie6&7 coding spec. I've read the guidelines to posting, so I've edited the post as much as possible to be helper friendly! Many thanks to all, doodlebug I'm trying to replace all the tables in my site for divs This is a test page for the main div container. Inside this will be the 3 columns of the layout: http://www.djbrunofacca.com.br/index2.php It renders ok in firefox but in ie 6.0 half of the box gets off the screen to the left. I've been trying to correct this for 8 hours straight and nothing. heres the css for the whole 3 columns thing: Code:
.box {
border:3px solid black;
position: absolute;
left; 0px;
width: 720px;
height: 100%;
}
.leftcol {
position: absolute;
padding-left: 15px;
padding-right: 15px;
top: 0px;
width: 140px;
height: 100%;
background-color: #333;
}
.maincol {
position: absolute;
padding-left: 15px;
padding-right: 15px;
top: 0px;
left: 110px;
width: 440px;
background-color: #0066cc;
}
.rightcol {
position: absolute;
padding-left: 5px;
padding-right: 5px;
top: 0px;
right: 0px;
width: 140px;
height: 100%;
background-color: #333;
}
thanks bruno Need to know how the pull down menu and a browse button could take a style like http://www.discovertravel.no/ i tried to make it but it did not work on firefox... so can anyone help me to make this style coz it appears well in firefox. So I have tested in all versions of IE and IE 7 seems to be the only one that gives me a problem. I have tried so many hacks. And now I am at a loss of ideas,time and mind. the site is woodbuiltright com / index-alpha1 php It seems the "E-Page" Div does not expand to contain everything. I have tried clearing divs but I must be missing something. Thanks Ok i want more than one div on the same line.... but this code isnt working. My divs are formatted to look like tables... just so you know. Code:
<center>
<div class="top">
<div class="header">
Header, Yo!
</div>
</div>
<div class="bg">
<div class="left">
<div class="header2">
Yo, Fool! Title!
</div>
</div>
<div class="main">
<div class="header2">
MAIN TITLE HERE
</div>
</div>
<div class="right">
<div class="header2">
Yo, Fool! Title!
</div>
</div>
</center>
I am currently trying to build a website for a church, and have run into a little css coding problem: It seems as if the browser is not interpreting how I see the CSS code to lay out on the page (common mistake I'm sure). I know a lot of the problems I am having comes from the height of my id's. If you take a look at "sci.tamucc.edu/~ksnapka/Website/Home/index.php" , the blue-bordered box is my "bodyWrap" css id. I am wanting this to expand to 100% of its contents inside the div container. If you look under some of the pages under "Our Faith in Action", I believe these work fine because I am using text inside of the bodyWrap container instead of other div containers nested in bodyWrap. The display on the home page actually looks better on IE, so I'm also not sure why firefox sets the height of that contained to 0 (I assume for some reason it sees that the container is empty since it just has other divs located inside of it?) The CSS code is on "sci.tamucc.edu/~ksnapka/Website/CSS/csTemplates.css" Any help is greatly appreciated Thank you in advance. Hi all...I am simply trying to create a header (colored bar). Every thing is fine, even in IE 8 but when it comes to IE 6, the bar does not appears. The code is simple CSS code is Code: #css
{
position:absolute;
top:0px;
height:30px;
right:0%;
left:0%;
background-color:#805670;
border-style:solid;
border-width:thin;
border-color:#805670;
padding-top:12px;
}
and I have just added this line in my .php page Code: <div id="mybio"></div> What can be the problem?? |
|||||||