|
CSS - Things Looking Ugly In Firefox
I just spent an hour putting this together and previewing it in IE... then when i go over to my mac and preview in safari.. UGH!!! UGLY!... Then in firefox.. UGLY!.. Any help would be appreciated.
Page is: reston.com/RESTON20/ Code:
@charset "utf-8";
/* RestonCOM 2.0 CSS */
/* 10/04/2008 */
/* Main Container Code */
#container{
height: inherit;
width: 1000px;
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border-bottom: 1px double rgb(74,77,144);
border-left: 1px double rgb(74,77,144);
border-right: 1px double rgb(74,77,144);
}
/* HEADER CODE */
#header{
height: 149px;
width: 1000px;
background-image:url(COM20-BANNER.png);
}
/* NAVIGATION CODE */
#navi{
height: 25px;
width: 995px;
background-color: #44478a;
margin-bottom: 1px;
margin-top: 0px;
margin-left: 2px;
padding-left: 2px;
padding-top: 2px;
color: #FFFFFF;
}
/* LEFT SIDE PANEL CODE */
#leftbar{
height:inherit;
width: 270px;
background-color:#FFFFFF;
float: left;
margin-left: 1px;
}
/* LEFT-BOX CODE */
#leftbox{
height:inherit;
width: 281px;
background-color: #FFFFFF;
float: inherit;
border: 1px double rgb(74,77,144)
}
/* LEFT-BOX-TITLE CODE */
#leftbox-title{
height:inherit;
width:281px;
background-color: #44478a;
float: inherit;
color: #FFFFFF;
}
/* MIDDLE CONTENT CODE */
#content{
height: inherit;
width: 712px;
background-color:#FFFFFF;
float: right;
padding-left: 1px;
}
/* MIDDLE-CONTENT HEADERS */
#content h1{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size:16px;
color:#000000;
font-weight: bold;
display: inline;
}
#content h2{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size:12px;
color:#44478a;
font-weight: bold;
display: inline;
}
/* NEWSFLASH - BOX */
#newsflash{
width: 700px;
background-color:#000000;
}
/* NEWSFLASH - LEFT */
#newsflash-left{
width: 349px;
background-color:#44478a;
color: #FFFFFF;
float: left;
padding-left: 1px;
}
/* NEWSFLASH - LEFT - BOX */
#newsflash-left-box{
width: 345px;
background-color:#FFFFFF;
color: #44478a;
border: 1px double rgb(74,77,144);
float: inherit;
}
/* NEWSFLASH - LEFT - IMAGE */
#newsflash-left-image{
width: 50px;
height: 50px;
background-image: url(NEWSFLASH-LEFT-IMAGE.png);
float: left;
border-right: 1px double rgb(74,77,144);
}
/* NEWSFLASH - LEFT - TEXT */
#newsflash-left-text{
width: inherit;
height: inherit;
float: inherit;
font-size: 9px;
}
/* NEWSFLASH - RIGHT (EVENTS) */
#newsflash-right{
width: 357px;
background-color:#44478a;
color: #FFFFFF;
float: right;
padding-left: 1px;
margin-right: 1px;
margin-left: 1px;
}
/* NEWSFLASH - RIGHT (EVENTS) IMAGE */
#newsflash-right-image{
width: 50px;
height: 50px;
float: left;
border-right: 1px double rgb(74,77,144);
background-image: url(NEWSFLASH-RIGHT-IMAGE.png);
}
/* NEWSFLASH - RIGHT (EVENTS) TEXT */
#newsflash-right-text{
width: inherit;
height: inherit;
float: inherit;
font-size: 9px;
}
/* NEWSFLASH - RIGHT - BOX (EVENTS) */
#newsflash-right-box{
width: 357px;
background-color:#FFFFFF;
color: #44478a;
float: inherit;
border: 1px double rgb(74,77,144);
}
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>Reston.com (2.0)</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"></div> <div id="navi">Navigation</div> <div id="leftbar"> <script src="http://arestravel.com/js/_default/ARESbot.js?bundle=reston&ro=1" type="text/javascript"></script> <div id="leftbox"> <div id="leftbox-title">Sponsored Advertising</div> <script type="text/javascript"><!-- google_ad_client = "pub-8246327012745782"; /* 250x250, created 10/4/08 */ google_ad_slot = "2128673963"; google_ad_width = 250; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> </div> <div id="content"> <div id="news-flash"> <div id="newsflash-left">Newsflash <div id="newsflash-left-box"> <div id="newsflash-left-image"></div> <div id="newsflash-left-text">This will be a description of the latest news article on our website. This will be a description of the latest news article on our website. <br /><strong>More</strong> </div> </div> </div> <div id="newsflash-right">Upcoming Event <div id="newsflash-right-box"> <div id="newsflash-right-image"></div> <div id="newsflash-right-text">This will be a description of the latest upcoming event in Reston Virginia. This will be a description of the latest upcoming event in Reston Virginia. <br /><strong>More</strong></div> </div> </div> <br /> <br /> <strong><h1>Your guide to working, living, and playing in Reston Virginia!</h1></strong> <br /> <br /> <h2>Reston Hotels</h2> - Stay in Reston! The hotels in the Reston area offer a full range of accommodations including luxury hotels and options for those on a budget. Conveniently located right off the Dulles Toll Road, just 15 minutes from Dulles International Airport, Reston is nearby most businesses in the area and within driving distance to Washington D.C. <br /> <br /> <h2>Reston Restaurants</h2> - Dine in Reston! Reston offers some of the best dining alternatives in Northern Virginia. Whether you're planning a romantic dinner, hosting a business gathering, grabbing an afternoon snack, celebrating a special occassion, or having a night out with the family, Reston's restaurants can meet your needs. <br /> <br /> <h2>Reston Town Center</h2> - Reston's famous "downtown" includes many shops and restaurants, ice skating, a multiplex movie theater, and a luxury hotel. Reston Town Center hosts outdoor festivals and concerts throughout the year, and features outdoor ice skating during the winter months. <br /> <br /> <h2>Village Centers</h2> - Explore Reston's village centers! Reston's community village centers each has its own special character and include shops, parks, lakes, walking and bike paths, art galleries, restaurants, museums, theaters, and much more. <br /> <br /> <h2>Reston Real Estate</h2> - Reston is a world renowned planned community and was recently ranked one of the top 100 Best Places to Live in America by Money Magazine. Reston's diverse selection of housing includes condos, apartments, townhomes, and single-family homes. Lakefront properties are also available.</div> </div> </body> </html> Similar TutorialsWell I'm pretty uneducated in CSS, I have just played around with it hours and hours and always figured out what I was trying to do. But right now I am stumped. Please view the following page in FireFox if you have it: http://www.iqdrop.com/newiq/index.php Then in IE You see the Google ad is dropped way down in IE for some reason and overlaps my menu, and the <DIV> containing the word "index.php" is also taller in IE. I'm not sure what is wrong and I've been trying all sorts of things with no luck. Thanks for any help. I'm pretty new to CSS (only just begun). I've been teaching myself using a number of resources, but I realise the best way to learn is to practice. I just don't think I'm doing it right. I want to have the main content of the page floating in the centre of the window, which works in IE but not firefox or opera. I also want san serif fonts, but these also aren't being displayed in Opera or Firefox. Any ideas? Here's the code: Code: /*** TEXT AND TAG STYLES ***/
body {
font:Geneva, Arial, Helvetica, san-serif;
color:#000000;
text-align:center;
background-color:#003366;}
h1 {
font:Geneva, Arial, Helvetica, san-serif;
color:#336699;
text-decoration:underline;}
h2 {
font:Verdana, Arial, Helvetica, sans-serif;
color:#336699;
text-decoration:none;}
h3 {
font:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;}
a {
color:#3366CC;
text-decoration:none;}
a:link {
color:#3366CC;
text-decoration:none;}
a:hover {
color:#336699;
text-decoration:underline;}
ul {
list-style-image:url(../images/bullets/bullet1.gif);}
ul ul {
list-style-image:url(../images/bullets/bullet2.gif);}
em {
color:#336699;
text-decoration:none;
}
/*** PAGE DIVISIONS ***/
#container {
width:772px;
height:600px;
top:7px;
text-align:left;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
background-color:#FFFFFF;
padding: 10px 10px 10px 10px;}
#masthead {
height:100px;
width: auto;}
#navbar {
position:relative;
top:2px;
width:auto;
height:15px;
padding: 3px 6px 3px 6px;
border-top: 2px solid #000033;
border-bottom: 2px solid #000033;
background-color:#336699;
color: #FFFFFF;}
#content {
position: relative;
top: 2px;
border-color:#336699;
border-style:groove;
border-width:1px;
width: auto;
height: 438px;
padding: 10px 7px 10px 12px;}
.piece {
position:relative;
float:left;
width: 522px;
height: 422px;
z-index: 1;
padding: 12px 6px 3px 12px;
border: 1px solid #000000}
.rightspace {
position:relative;
top: 0px;
float:right;
width:190px;
height:422px;
z-index: 2;
background-color:#CCCCCC;
padding:12px 6px 3px 8px;}
#bottombar {
height: 12px;
margin-top: 12px;
top: 12px;
border-top: 1px solid #333399;
background-color:#00FF33;}
also, i don't think i'm using classes properly, but I think I just realised that. midgetporn I am currently having to deal with a mystery padding at the bottom of each of my im_container tags... everything is set to 0px, and oddly enough... it looks GREAT in IE (ugghh... i can't believe i just said that)... it doesnt however look good in firefox... whats up... here is the XHTML followed by the CSS.. Code: <div class="im_left"> <div class="im_container"> <div class="im_logo"><img src="/images/im_icq.gif" alt="Contact Via ICQ" /></div> <div class="im_info"> 164149536 </div> <div class="clear"></div> </div> <div class="im_container"> <div class="im_logo"><img src="/images/im_aim.gif" alt="Contact Via AIM" /></div> <div class="im_info"> Incomplete Gamer </div> <div class="clear"></div> </div> </div> Code: .im_left {float:left; width:270px;}
.im_container {
margin:0 0 0 30px !important;
border:1px solid #900;
}
.im_container a:link,
.im_container a:visited,
.im_container a:active,
.im_container a:hover {color:#FFF;}
.im_logo {
margin:0px 0 0 0;
float:left;
width:30px; margin:0px; padding:0px;
}
.im_logo img {border:0px; margin:0px; padding:0px;}
.im_info {
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0 0 0 5px;
text-align:justify;
width:200px;
float:left;
}
.im_title {
text-align:center;
font-weight:bold;
}
Hi guys, could anyone take a look at this and tell me whats wrong? why is that top border still there? the black line at the top... img156.imageshack.us/img156/4616/whyfc7.png Hey, for a while I've been developing a site, just to improve my skills in php etc. I always tested it in IE7/IE8 and Mozilla 3, I knew other browsers wouldn't render it great, but I also need things to look okay with Chrome. This is how my site SHOULD look: This is how it looks in chrome: My site URL is http://www.pokerbrothers.net The HTML for the entire page: The parts that effect the 2 bars that are broken in chrome are highlighted 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" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content="poker,brothers,free,fast,simple,texas,holdem,guest" />
<meta name="robots" content="follow,index" />
<title>Home :: PokerBrothers.net</title>
<link href="http://www.static.pokerbrothers.net/css/include?load=15&x=182&y=631" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Globs
var session_id = "pjpennan89o2m1dn6kjh4n48d7";
var session_userid = 0;
var session_username = "Guest_";
var session_location = "http://www.pokerbrothers.net/";
var session_location_encoded = "http%3A%2F%2Fwww.pokerbrothers.net%2F";
var session_location_last = "";
function pageOnLoad () {
setTimeout("pbhttp_Session_Exit(true, '15')", 900000);
}
</script>
<script type="text/javascript" src="http://www.static.pokerbrothers.net/js/class.js" defer="defer"></script>
<script type="text/javascript" src="http://www.static.pokerbrothers.net/js/global.js" defer="defer"></script>
</head>
<body onload="pageOnLoad();">
<div id="container" align="center">
<div class="bar_container">
<ul id="bar_header">
<li id="bar_header_left"></li>
<li id="bar_header_title"><a href="http://www.pokerbrothers.net/"></a></li>
<li id="bar_header_fill"></li>
<li id="bar_header_howtoplay"><div/><a href="http://www.faq.pokerbrothers.net/play/how"></a></li>
<li id="bar_header_signup"><div/><a href="http://www.signup.pokerbrothers.net/"></a></li>
<li id="bar_header_play"><div/><a href="http://www.play.pokerbrothers.net/"></a></li>
</ul>
</div>
<div class="bar_container">
<div id="bar_navigation">
<div id="bav_navigation_top">
<div id="bar_navigation_top_left"></div>
<div id="bar_navigation_top_fill">
<div id="bar_navigation_top_fill_loginarea">
<form id="navlogin" name="navlogin" action="http://www.login.pokerbrothers.net/login" method="post" onsubmit="return pbhttp_nav_login_check()">
<div id="bar_navigation_top_fill_loginarea_usernamearea">
<input type="text" id="navlogin_username" name="navlogin_username" maxlength="30" value="Username" onfocus="nav_login_form_onclick('user');" onblur="nav_login_form_exit('user')" />
</div>
<div id="bar_navigation_top_fill_loginarea_passwordarea">
<input type="text" id="navlogin_password" name="navlogin_password" maxlength="30" value="Password" onfocus="nav_login_form_onclick('pass');" />
</div>
<div id="bar_navigation_top_fill_loginarea_submitarea">
<input type="submit" id="navlogin_submit" name="navlogin_submit" value="" />
</div>
</form>
</div>
<div id="bar_navigation_top_left_text">
Welcome to PokerBrothers. Please login or <a href="http://www.signup.pokerbrothers.net/">Sign up</a>
</div>
</div>
<div id="bar_navigation_top_right"></div>
</div>
<div id="bar_navigation_bottom">
<div id="bar_navigation_bottom_left"></div>
<div id="bar_navigation_bottom_fill">
</div>
<div id="bar_navigation_bottom_right"></div>
</div>
</div>
</div>
<div class="bar_container">
<table id="bar_body" cellpadding="0" cellspacing="0" border="0">
<tr id="bar_body_top">
<td id="bar_body_box1_top_left"></td>
<td id="bar_body_box1_top_fill" align="center"><div id="bar_body_box1_top_text"></div></td>
<td id="bar_body_merge_top"></td>
<td id="bar_body_box2_top_fill" align="center"><div id="bar_body_box2_top_text"></div></td>
<td id="bar_body_box2_top_right"></td>
</tr>
<tr id="bar_body_middle">
<td id="bar_body_box1_middle_left"></td>
<td id="bar_body_box1_body">
Welcome to PokerBrothers.net, bleh.
</td>
<td id="bar_body_merge_middle"></td>
<td id="bar_body_box2_body">
Load ad here
</td>
<td id="bar_body_box2_middle_right"></td>
</tr>
<tr id="bar_body_bottom">
<td id="bar_body_box1_bottom_left"></td>
<td id="bar_body_box1_bottom_fill"></td>
<td id="bar_body_merge_bottom"></td>
<td id="bar_body_box2_bottom_fill"></td>
<td id="bar_body_box2_bottom_right"></td>
</tr>
</table>
</div> </div>
</body>
</html>
And the CSS... Direct links: Some CSS that effects both bars: http://www.static.pokerbrothers.net...de?load=6&x=571 The top bar's css: http://www.static.pokerbrothers.net/css/headerbar.css the other bar's css: http://www.static.pokerbrothers.net/css/navbar.css I'm wondering if anybody has any clues as to why my site appears like this, i've spent hours and hours trying countless things but to no avail. Any help on anything related to this will be appreicated, thanks . Oh, and sorry for the lack of commenting in the CSS, it wasnt planned... It is quite messy I have 2 columns of CSS and it looks OK in IE. When I do the "Print Preview", only part of it prints out. Here is what it looks like URL( I put a blank before the "." aims .uaex .edu/testpidm2 .htm Code:
/*****======== ***4-25-11 added below Unable to print with this style sheet.
However it looked good on screen.***/
#dminMax {width:90%;
margin:0 auto;
background:#e0e0e0;
}
#dheader {background:#a31e39;
}
#dLeftGoal {float:left;
width:20%;
background:#d0c0c0;
}
#dLeftGoal {padding-bottom:32767px;
margin-bottom:-32767px;
}
#dLeftOut {float:left;
width:100%;
background:#00ffff;
}
#dLeftOut {padding-bottom:32767px;
margin-bottom:-32767px;
}
#wrapper {overflow:hidden;
}
#dViewMessage {width:80%;
float:left;
background:#d8d8d8;
}
#footer {clear:both;
background:#455c5a;
}
h1 {font-size:20px;
margin:0;
padding:10px 0;
color:#fff;
}
h3 {font-size:18px;
margin:0;
padding:8px 0;
}
h4 {font-size:3px;
font-size:1em;
margin:0;
padding:8px 0;
font-weight:bold;
}
h5 {font-size:3px;
font-size:1.2em;
margin:0;
padding:8px 0;
font-weight:bold;
}
.dmessage {padding:10px;
text-align:left;
}
.dsubtitle {padding:10px;
font-weight:bold;
text-align:left;
}
.d2subtitle { padding:10px;
font-weight:bold;
background:#00ffff;
}
.dindent {
margin-left:50px;
}
.d72indent {
margin-left:50px;
text-align:left;
}
dsubline{ text-indent:-3px;}
p { text-align:left;
font-size:1em;
line-height:1.5em;
margin:0;
padding:5px 0;
}
#footer p,
#header p {color:#fff;}
#footer a {color:#fff;}
#footer a:hover {text-decoration:none;}
Any suggestions? I know this must be something simple. TIA. Hi, I'm trying to work a bit with divs Anyway, I got this atm: Code: #container {
margin: 0px auto;
width: 600px;
}
#menu-left {
float:left;
height:auto;
width:100px;
}
#menu-right {
float:right;
height:auto;
width:100px;
}
#content {
float:left;
width:400px;
top: 200px;
}
#article { background-color:#999999;
border:dashed 1px black;
float:none;
width:380px;
height:100px;
margin: 0 10px 0 10px}
So I got a container around all the other divs, 1 div on the left (menu-left), one on the right (menu-right) and inbetween them the (content) div. In the content I got the (article) div, I want to have more of those underneath eachother after a while. Now normally the width of the Article div would equal 400 as well and fit perfectly between menu-left and menu-right. Yet it doesnt fit PERFECTLY inbetween them. If I take 8px margin on the left it fits, how is this possible?? ___ EDIT ___ Without the 1px border it seems to fit, but why doesn't it fit WITH the border? Thanks! Here is my css code:
Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
#sidebar {
float:left;
width:140px;
height: 100%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
padding-right: 10px;
margin: 10px 10px 10px 0px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sidebar a:link, #sidebar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sidebar a:hover, #sidebar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sidebar ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
Here is my html code: Code: <body>
<div id="page">
<div id="header"><img src="images/vitalograph_spirometers_logo.gif" width="230" height="36" alt="vitalograph spirometers logo" />
<span class="tagline">world leaders in spirometry</span></div>
<div id="topbar">
<ul>
<li><a href="/home.html">Home</a></li>
<li><a href="/about_us/about_us.html">About Us</a></li>
<li><a href="/other_regions.html">Other Regions</a></li>
</ul>
</div>
<div id="sidebar">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Contact Us/Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
</div>
</body>
If it is more helpful - This is a link to the actual html file to view I am going to turn it into a template with an editable main section (the large blank area to the bottom right. I think my problems are all with the sidebar id - but I could be wrong as this is my first attempt at css and tabless design. Ignore the search part - that is phase 2 so I am not messing with that at this point. Here are the problems I am trying to correct: 1) I want the sidebar column to extend to the bottom of the page container - 10px. Some page containers could be longer than 600px height - but that will be the minimum height of the container. Currently it goes down all the way to the page id border with no white space. I know this is because I put in height 100% - but what I really need is something like 100% - 10px - but that doesn't seem to be an option. The page container has 10 px padding but it doesn't seem to be making a difference. 2) The left side list navigation indentation has some problems. See the side bar here to see what I want it to look like The list navigation part should be indented 20px from the left edge of the sidebar (10px more than the category class). Currently in fox fire they are both 10px from the right edge. In IE they are indented way too much. As always any help is greatly appreciated. Thanks! i wanted to create a new thread because the new problems are not same as the one in my other thread so i thought best to create a new post. Site url: www.plumstead-mosque.co.uk Problem1: if you have the developer's extension for Firefox turn on the display>information>block size (useful for reference) and you will see that form starts right near where the UL/lists/menu starts and not after the menu which is strange Problem2: when i try adding border to the whole form element the border only appears on the label and not the input & submit button similarly that donate button is also a form but border isnt going around it... problem3: submenu font appears a bit smaller (in IE) problem4: when you hover over a menu link, the link turns a diff color and in FF you can go past the text and the cursor will remain in the "link" mode ie a hand but in IE if you hover past the text although the background color will remain the cursor will revert back to normal non-link mode problem5: if you do the css developer thing again, you will see that for some reason firefox makes items on left side appear to go out of screen ie making it seem as if the width of items is larger then what it seems I am redesigning this site in a css layout, and I've had minimal problems so far, but IE:mac (of course) is doing some weird things. Example One: The header of the search box is stretching to the right, when the googleads box is floated right. Eample Two: The ul in the left side bar is placing the bullets outside of the wrapper and is aligned to the left side of the browser. The rollovers have also been slow in other browsers. These are my two main issues. If there are any other suggestions as to how I could lay this out more efficiently, it would be much appreciated. Thanks! Site CSS I am honestly trying to do this thing with CSS but CSS does not seem rational. I had some nested div elements now I thought that position relative was with respect to the parent. So if I put position: relative; left:100px; top: 8px on the red one it will be close to the top of the parent (the blue one) and 100 px over from the left. Then if I do the green div the same except top: 22px it will be right below the red one. I know divs make a new line but they were skipping a line. So I turned them into spans. now it starts the second one at the right place top to bottom, but left to right it starts where the last one left off. And now here's an even harder question, I guess without using zindex they won't overlay, right? and centering is just out of the question... Code: <div>
<div> </div>
<div> </div>
</div>
Here is some sample actual code: http://www.colleenweb.com/onetix.html It doesnt have all the normal styles but it shows the problem very clearly. If you look at the code it should be pretty clear what I intended. Please tell me why the position specifications are being ignored. And problems are compounded when you try to print it, it makes the graphic background bigger and cuts it off. If you just print the graphic it is fine. I gave up with the transparent for now because this has to work tomorrow, and just made a hard coded blue one but eventually I'd like to address that too. I need to be able to make these look acceptable both for screen and print. I never had these problems when I did everything with tables. This is why people don't learn CSS. I'm getting a headache here. What I'm creating is a very simple web gallery. Yes, wheel being reinvented, please don't tell me I need to use something canned. When an individual image is displayed, the image needs to be centered left-to-right. However, I want to offer a button that shows the EXIF data in a side-pane, and when it appears, the image and EXIF data block need to be centered as an aggregate. The image display and the EXIF retrieval are both done with server-side scripts (the latter being pulled via AJAX so that it does not need to be extracted if it isn't requested by the user). Now, here's the deal: I have this working perfectly using a table-based layout, but all my attempts to get it done using DIVs behave badly. I either get an image div that doesn't move when I activate the EXIF div, or the EXIF div ends up UNDER the image div. It should be really simple... I'm just too stupid to figure it out. CSS always kicks my butt. So this site is having a bit of trouble in WinIE 6.0. If you resize the window after you load the page, the dark brown area behind the content sort of gets stuck on the right. I'm wondering if it might have something to do with the javascript I had to do to get IE to recognize fixed backgrounds. Any ideas? Site: http://dev.sabotagemedia.com/firstclass/ CSS: http://dev.sabotagemedia.com/firstclass/_css/style.css hello, this is my first post so apologies if i give too much information, but rather than miss something crucial, i thought it best to cover all my bases. i am new to CSS and have been trying to reproduce a design that i created as an image, in CSS for a website layout. i have managed the 'bones' of the website but am having difficulty when i get to the actual content. not being the most technical when it comes to CSS terminology, i have uploaded an image which shows what i want it to look like here a cut down version of the page, including just the area in question is available here XHTML css i validated my xhtml, but the css came up with warnings but didn't say it was invalid. i hope this is OK? in firefox it looks fine, but in IE 6, you can see that the photo of the product is not flush to the left of the bordered div. i'm not sure if i have gone about it the wrong way or if it is IE. a friend suggested that rather than have the 2 divs overlapping, i should just use a background image to create the effect, but being stubborn, i would like to try to fix this way, just for experience. would anyone mind having a look? hopefully i have provided enough info, but apologies if not. just ask and i will do my best to explain. thank you for your time J I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. I'm having an issue where a website is showing up a few pixels off in Mac Firefox than it is in PC firefox. Anyone have a quick fix for this? Mac Screenshots: http://graffetto.com/chops/clairus_screens.pdf PC Firefox Screenshot: Firefox, IE, and Netscape all look identical on PC, while firefox, IE and safari look identical on Mac, but different from PC (except safari - messed up text) Any help is greatly appreciated Edit: after reviewing my post I realized I was quite vague. What I'm looking for is a way to filter CSS so that only Mac Firefox users will receive one CSS file, and PC users will receive another. I created a menu for someone, hideous as it may be, it's what they wanted. However, it works in Firefox but not in Internet Explorer. This is code I used for the menu. .Menu ul li { float:left; position:relative; list-style-image:url(images/divider2.gif); margin:0 15px 0 20px; padding:0; } I have an image to replace the bullets that would normally appear. In Firefox it appears with the image as it should, but in Internet Explorer it is not showing up like it should. I see there is another post here on this. But it may be a different issue. I was hoping some of the experts could take 30 seconds to see why this looks fine in Firefox and not IE. It did validate at w3c. I am sure there is a hack, but if there is something that sicks out real quick it would be much appreciated. I know everyone gives there extra time here and it is greatly appreciated. echo9design.com/willoughby/index3.html I built a website and its rendering one way in firefox and another in IE. I want it to display just the way Firefox has it. However, IE keeps messing up the padding and the whole layout is destroyed. Can anyone look at my code and tell me where I am going wrong? Please can someone tell me what I must do to get the code working in both IE and Firefox. |
|||||||