|
CSS - Css Problems - Possible Cache Issue?
Similar TutorialsNot sure if this question should be in the CSS section: I'm working on a site which, on first load, seems to render some of the CSS before loading the rest of the site in. This has the effect that the font-sizes are really big for a second before resizing. I've also noticed that if the site is left untouched for a while and the page refreshed then the same thing happens. Can anyone elighten me as to why this might be happening? It's very frustrating. Thanks R Hi, I've just joined these forums as I have a very annoying problem. I have created a webpage which I have checked using the w3c validator - it is valid for XHTML 1.0 Transitional and Strict. It is a simple design; Header 3 Cols Footer It works perfectly in IE7, however in FireFox (2.0.0.14) I am getting some very strange behaviour. On the first, clean load (cache cleared) the page is rendered incorrectly - the Middle and Right columns being rendered below the Left Column. If you then click on the address bar and press enter (thus reloading the page from the cache) it is rendered perfectly. If I clear the cache, go to the address bar, and press enter again it renders incorrectly. Pressing F5 to refresh (ignoring the cache) also results in it being rendered incorrectly. Correct: URL Incorrect: URL I thought it might have been image dimensions not being set - so I went through and set all these to no avail. Code: HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Stuff</title>
<link rel='stylesheet' type='text/css' href='style.css' />
</head>
<body>
<div id='outerFrame'>
<div id='header'>
<div id='banner'>
<div id='leftTop'><img style='width: 338px; height: 135px;' src='gfx/banner_Left.gif' alt='Dancewear Central The UK's Number 1 Dancewear Specialist ' /></div>
<div id='rightTop'><img style='width: 522px; height: 135px;' src='gfx/banner_Right.png' alt='' /></div>
</div>
<div id='topNav'>
<div class='link'><a href='#'><img style='width: 122px; height: 26px;' src='gfx/btns/btnHome.gif' alt='Home'/></a></div>
<div class='link'><a href='#'><img style='width: 122px; height: 26px;' src='gfx/btns/btnCompanyProfile.gif' alt='Company Profile'/></a></div>
<div class='link'><a href='#'><img style='width: 122px; height: 26px;' src='gfx/btns/btnProductListing.gif' alt='Product Listing'/></a></div>
<div class='link'><a href='#'><img style='width: 122px; height: 26px;' src='gfx/btns/btnBestSellers.gif' alt='Best Sellers'/></a></div>
<div class='link'><a href='#'><img style='width: 122px; height: 26px;' src='gfx/btns/btnSpecialOffers.gif' alt='Special Offers'/></a></div>
<div class='link'><a href='#'><img style='width: 122px; height: 26px;' src='gfx/btns/btnContactUs.gif' alt='Contact Us'/></a></div>
<div class='link'><a href='#'><img style='width: 122px; height: 26px;' src='gfx/btns/btnLatestNews.gif' alt='Latest News' style='margin: 0; float: right;'/></a></div>
</div>
</div>
<div id='innerFrame'>
<div id='leftCol'>
<div id='searchBox'>
<div class='title'><img src='gfx/searchBox_header.gif' style='width: 200px; height: 22px;' alt='Search Dancewear Central'/></div>
<div class='body'></div>
</div>
<div id='newsletterBox'>
<div class='title'><img src='gfx/newsletterBox_header.gif' style='width: 200px; height: 22px;' alt='Newsletter Sign Up'/></div>
<div class='body'></div>
</div>
<div id='categoryBox'>
<div class='title'><img src='gfx/categoryBox_header.gif' style='width: 200px; height: 22px;' alt='Product Categories'/></div>
<div class='body'>
<div class='link'><a href='#'>Ladies Leotards</a></div>
<div class='link'><a href='#'>Childrens Leotards</a></div>
<div class='link'><a href='#'>Urban/Street</a></div>
<div class='link'><a href='#'>Examination</a></div>
<div class='link'><a href='#'>Ballet Shoes</a></div>
<div class='link'><a href='#'>Ballroom Shoes</a></div>
<div class='link'><a href='#'>Tap and Character Shoes</a></div>
<div class='link'><a href='#'>Jazz Shoes</a></div>
<div class='link'><a href='#'>Sneakers</a></div>
<div class='link'><a href='#'>Warm-Ups</a></div>
<div class='link'><a href='#'>Boys/Mens</a></div>
<div class='link'><a href='#'>Tights</a></div>
<div class='link'><a href='#'>Underwear</a></div>
<div class='link'><a href='#'>Skirts/Tutus</a></div>
<div class='link'><a href='#'>Bags</a></div>
<div class='link'><a href='#'>Accessories</a></div>
</div>
</div>
<div id='brandBox'>
<div class='title'><img src='gfx/brandBox_header.gif' style='width: 200px; height: 22px;' alt='Brand Search'/></div>
<div class='body'>
<div class='link'><a href='#'>Capezo</a></div>
<div class='link'><a href='#'>Roch Valley</a></div>
<div class='link'><a href='#'>Bloch</a></div>
<div class='link'><a href='#'>Sansa</a></div>
<div class='link'><a href='#'>Danskin</a></div>
<div class='link'><a href='#'>Wear-Moi</a></div>
<div class='link'><a href='#'>Bunheads</a></div>
<div class='link'><a href='#'>Danz-ez</a></div>
<div class='link'><a href='#'>So-Danca</a></div>
<div class='link'><a href='#'>Grishko</a></div>
<div class='link'><a href='#'>Kerska</a></div>
<div class='link'><a href='#'>Aniluce</a></div>
<div class='link'><a href='#'>Kias</a></div>
</div>
</div>
<div id='recommendBox'>
<div class='title'><img src='gfx/recommendBox_header.gif' style='width: 200px; height: 22px;' alt='Recommend a Friend' /></div>
<div class='body'>asd</div>
</div>
<div id='ballroomBox'><img src='gfx/ballroomcentral_link.gif' style='width: 200px; height: 46px;' alt='Ballroom Central'/></div>
</div>
<div id='contentFrame'>
<img src='gfx/content_mainimage.jpg' style='width: 444px; height: 269px;' alt=''/>
<img src='gfx/content_Header.gif' alt='' style='width: 374px; height: 22px; margin: 20px 0px 0px 7px;'/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nulla. Pellentesque lobortis nulla eget purus. In erat.
Maecenas posuere, mauris vel vulputate consecetuer, risus neque aliquet tellus, at imperdiet leo ipsum eu massa. Donec hendrerit.
Vestibulum cursus faucibus tellus. Mauris molestie, risus a vulputate auctor, est massa sollicitudin purus, et lacinia pede pede vitae mauris.</p>
</div>
<div id='rightCol'>
<div id='loginBox'>
<div class='title'><img src='gfx/loginBox_header.gif' style='width: 200px; height: 22px;' alt='Login to Dancewear Central'/></div>
<div class='body'></div>
</div>
<div id='basketBox'>
<div class='title'><img src='gfx/basketBox_header.gif' style='width: 200px; height: 25px;' alt='Shopping Basket'/></div>
<div class='body'></div>
</div>
<div id='discountBox'>
<div class='title'><img src='gfx/discountBox_header.gif' style='width: 200px; height: 135px;' alt='Get 10% off with a Dance School Discount at Dancewear Central'/></div>
<div class='body'><a href='#'>click here for information</a></div>
</div>
<div id='bestsellerBox'>
<div class='title'><img src='gfx/bestsellerBox_header.gif' style='width: 200px; height: 22px;' alt='Best Sellers'/></div>
<div class='body'><br /><br /><br /><br /><br /></div>
</div>
<div id='bundleBox'>
<a href='#'><img src='gfx/bundleBox_gfx.gif' style='width: 200px; height: 139px;' alt='Click here to see some of our amazing bundle deals'/></a>
</div>
</div>
</div>
<div id='footer'>
<img src='gfx/footer_brands_gfx.gif' style='width: 860px; height: 67px;'alt=''/>
<p><a href='#'>Home</a> | <a href='#'>Products</a> | <a href='#'>Company Profile</a> | <a href='#'>Best Sellers</a> | <a href='#'>Special Offers</a> | <a href='#'>Bundles</a> | <a href='#'>Contact</a> | <a href='#'>News</a> | <a href='#'>Dance School Discount</a> | <a href='#'>Site Map</a> | <a href='#'>Statutory Information</a></p>
</div>
</div>
</body>
</html>
Code:
CSS
body {
margin: 0;
padding: 0;
background-image: url(gfx/body_bg.gif);
background-attachment: fixed;
background-repeat: repeat-x;
text-align: center;
font-size: 11px;
font-family: tahoma;
border-style: none;
}
#outerFrame {
z-index: 1;
width: 900px;
background-color: #FFF;
height: auto;
margin: auto;
background-image: url(gfx/outerFrame_bg.gif);
text-align: left;
}
#header {
z-index: 2;
position: relative;
width: 860px;
height: 161px;
margin: 0px 20px 0px 20px;
padding: 0px;
background-color: #FFF;
}
#header #banner {
z-index: 3;
position: relative;
width: 860px;
height: 135px;
margin: 0;
padding: 0;
background-color: #FFF;
}
#header #banner #leftTop {
z-index: 4;
position: relative;
float: left;
width: 338px;
height: 135px;
}
#header #banner #rightTop {
z-index: 4;
position: relative;
float: right;
width: 522px;
height: 135px;
}
#header #topNav {
z-index: 4;
position: realtive;
width: 861px;
height: 26px;
background-color: #FFF;
}
#header #topNav .link {
z-index: 5;
position: relative;
float: left;
width: 122px;
height: 26px;
margin: 0px 1px 0px 0px;
padding: 0;
}
#header #topNav .link img {border-style: none;}
#innerFrame {
z-index: 6;
position: relative;
display: table;
width: 860px;
height: 100%;
background-color: #FFF;
margin: 10px 20px 0px 20px;
padding: 0px;
}
#innerFrame #leftCol {
position: relative;
float: left;
z-index: 7;
width: 200px;
height: auto;
background-color: #FFF;
}
#innerFrame #leftCol #searchBox {
position: relative;
float: left;
z-index: 8;
width: 200px;
height: 121px;
background-color: #FFF;
margin: 0px 0px 8px 0px;
padding: 0px;
}
#innerFrame #leftCol #searchBox .title {
position: relative;
z-index: 9;
width: 200px;
height: 22px;
margin: 0px 0px 1px 0px;
padding: 0;
}
#innerFrame #leftCol #searchBox .body {
position: relative;
z-index: 9;
width: 200px;
height: 98px;
background-image: url(gfx/leftCol_box_bg.gif);
}
#innerFrame #leftCol #newsletterBox {
position: relative;
float: left;
z-index: 8;
width: 200px;
height: 110px;
background-color: #FFF;
margin: 0px 0px 8px 0px;
padding: 0px;
}
#innerFrame #leftCol #newsletterBox .title {
position: relative;
z-index: 9;
width: 200px;
height: 22px;
margin: 0px 0px 1px 0px;
padding: 0;
}
#innerFrame #leftCol #newsletterBox .body {
position: relative;
z-index: 9;
width: 200px;
height: 87px;
background-image: url(gfx/leftCol_box_bg.gif);
}
#innerFrame #leftCol #categoryBox {
position: relative;
float: left;
z-index: 8;
width: 200px;
height: auto;
background-color: #FFF;
margin: 0px 0px 8px 0px;
padding: 0px;
}
#innerFrame #leftCol #categoryBox .title {
position: relative;
z-index: 9;
width: 200px;
height: 22px;
margin: 0px 0px 1px 0px;
padding: 0;
}
#innerFrame #leftCol #categoryBox .body {
position: relative;
z-index: 9;
width: 200px;
height: auto;
margin: 0;
padding: 0;
}
#innerFrame #leftCol #categoryBox .body .link {
position: relative;
z-index: 10;
width: 200px;
height: 20px;
margin: 0px 0px 1px 0px;
padding: 0;
}
#innerFrame #leftCol #categoryBox .body .link a {
width: 190px;
height: 16px;
display: block;
font-family: tahoma;
font-weight: bold;
color: #000;
font-size: 0.8em;
background-color: #e8e8e8;
padding: 4px 0px 0px 10px;
text-decoration: none;
}
#innerFrame #leftCol #categoryBox .body .link a:hover {background-color:#fcdf68; text-decoration: underline;}
#innerFrame #leftCol #brandBox {
position: relative;
float: left;
z-index: 8;
width: 200px;
height: auto;
background-color: #FFF;
margin: 0px 0px 8px 0px;
padding: 0px;
}
#innerFrame #leftCol #brandBox .title {
position: relative;
z-index: 9;
width: 200px;
height: 22px;
margin: 0px 0px 1px 0px;
padding: 0;
}
#innerFrame #leftCol #brandBox .body {
position: relative;
z-index: 9;
width: 200px;
height: auto;
margin: 0;
padding: 0;
}
#innerFrame #leftCol #brandBox .body .link {
position: relative;
z-index: 10;
width: 200px;
height: 20px;
margin: 0px 0px 1px 0px;
padding: 0;
}
#innerFrame #leftCol #brandBox .body .link a {
width: 190px;
height: 16px;
display: block;
font-family: tahoma;
font-weight: bold;
color: #000;
font-size: 0.8em;
background-color: #e8e8e8;
padding: 4px 0px 0px 10px;
text-decoration: none;
}
#innerFrame #leftCol #brandBox .body .link a:hover {background-color:#fcdf68; text-decoration: underline;}
#innerFrame #recommendBox {
z-index: 10;
position: relative;
float: left;
margin: 8px 0px 0px 0px;
padding: 0;
width: 200px;
height: 106px;
background-color: #FFF;
}
#innerFrame #recommendBox .title{
position: relative;
z-index: 11;
width: 200px;
height: 22px;
margin: 0px 0px 1px 0px;
padding: 0;
}
#innerFrame #leftCol #recommendBox .body {
position: relative;
z-index: 11;
width: 200px;
height: 83px;
background-image: url(gfx/leftCol_box_bg.gif);
}
#innerFrame #leftCol #ballroomBox {
position: relative;
z-index: 11;
float: left;
width: 200px;
height: 46px;
margin: 8px 0px 0px 0px;
padding: 0px;
}
#innerFrame #contentFrame {
position: relative;
float: left;
z-index: 7;
width: 444px;
height: auto;
background-color: #FFF;
margin: 0px 8px 0px 8px;
}
#innerFrame #contentFrame p {
margin: 20px 0px 0px 7px;
}
#innerFrame #rightCol {
position: relative;
float: right;
z-index: 7;
width: 200px;
height: auto;
background-color: #FFF;
}
#innerFrame #rightCol #loginBox {
z-index: 10;
position: relative;
float: left;
width: 200px;
height: 108px;
}
#innerFrame #rightCol #loginBox .title {
position: relative;
z-index: 11;
width: 200px;
height: 22px;
margin: 0px 0px 0px 0px;
padding: 0;
}
#innerFrame #rightCol #loginBox .body {
position: relative;
z-index: 11;
width: 200px;
height: 87px;
background-image: url(gfx/rightCol_box_bg.gif);
}
#innerFrame #rightCol #basketBox {
z-index: 10;
position: relative;
float: left;
width: 200px;
height: 123px;
margin: 8px 0px 0px 0px;
padding: 0;
}
#innerFrame #rightCol #basketBox .title {
position: relative;
z-index: 11;
width: 200px;
height: 25px;
margin: 0px 0px 0px 0px;
padding: 0;
}
#innerFrame #rightCol #basketBox .body {
position: relative;
z-index: 11;
width: 200px;
height: 98px;
background-image: url(gfx/basketBox_body_bg.gif);
}
#innerFrame #rightCol #discountBox {
z-index: 10;
position: relative;
float: left;
width: 200px;
height: 165px;
margin: 8px 0px 0px 0px;
padding: 0;
}
#innerFrame #rightCol #discountBox .title {
position: relative;
z-index: 11;
width: 200px;
height: 135px;
margin: 0px 0px 0px 0px;
padding: 0;
}
#innerFrame #rightCol #discountBox .body {
position: relative;
z-index: 11;
width: 200px;
height: 20px;
background-image: url(gfx/discountBox_body_bg.gif);
padding-top: 10px;
}
#innerFrame #rightCol #discountBox .body a{
color: #FFF;
font-weight: bold;
text-decoration: underline;
margin: 0px 0px 0px 13px;
}
#innerFrame #bestsellerBox {
z-index: 10;
position: relative;
float: left;
width: 200px;
height: auto;
margin: 8px 0px 0px 0px;
padding: 0;
}
#innerFrame #rightCol #bestsellerBox .title {
position: relative;
z-index: 11;
width: 200px;
height: 22px;
margin: 0px 0px 0px 0px;
padding: 0;
}
#innerFrame #rightCol #bestsellerBox .body {
position: relative;
z-index: 11;
width: 200px;
height: auto;
background-image: url(gfx/rightCol_box_bg.gif);
}
#innerFrame #bundleBox {
z-index: 10;
position: relative;
float: left;
width: 200px;
height: 139px;
margin: 8px 0px 0px 0px;
padding: 0;
}
#innerFrame #bundleBox img{
border-style: none;
}
#footer {
z-index: 12;
position: relative;
display: table;
width: 860px;
height: auto;
margin: 10px 20px 0px 20px;
padding: 0px;
background-color: #FFF;
}
#footer p {
text-align: center;
color: #6e6e6e;
margin-bottom: 10px;
}
#footer p a {
color: #6e6e6e;
}
Hope someone can help me out! Thanks in advance, Dave. Hi all, I have created a tree menu that is dynamically loaded from the directory structure on my web server. Because it takes a while to load, I was wondering if there is any way to cache the menu so that the browser doesn't have to load it again and again. My idea is to cache it twice a day maybe (to keep up to date as it is accessing the report). Does any one know a way of doing it? Regards, Sameer. I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! Hello I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this. Second: In Firefox it looks like a disaster! Help! http://www.tombraiders.net/katie/shelly/index.html User: letme Pass: in Thank you! Hello Guys, I am trying to get the the css to work but having a hard time with it and need some help.. Here is the content lined up in fire fox. http://content.screencast.com/users/dank2009/folders/Jing/media/4198ca5c-6c75-4196-a2e7-ba1c423caca7/2011-08-22_1550.png Ad this is what it looks like in IE (See my issue) http://content.screencast.com/users/dank2009/folders/Jing/media/c9f0dcd6-19c9-48f6-83f8-9c55d7417fcc/2011-08-22_1551.png Here is the code Code: echo '<div class="listing"><img src="'.$listing_photo.'"><span class="listlink"><a href="index.php?content=subcats&id='. $listing_id.'">'.$listing_title2.'</a></span><br><span class="listbody">'.$listing_body2.'<span class="readmore"><a href="index.php?content=subcats&id='. $listing_id.'"> Read more</a></span>>>></div>'; Here is the CSS Code: .listing {
width:560px;
height:auto !important;
margin: 0 auto;
text-align: left
}
.listlink {
float:left;
margin-left: 10px;
margin-top: 20px;
position: absolute;
text-decoration:underline;
}
.listbody {
float: left;
margin-left: 110px;
margin-top: -30px;
width:440px
}
.listingdiv{
border-bottom: 2px dotted #9EABB5;
color:#FFF;
}
Please advise how to fix this.. Thanks for your help in advance.. Dan Hi everyone, For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine. So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html but I don't see what he did to solve it. Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating . I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions. Thanks in advance if you can give a DIV newbie a heads up. Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>
I'm having trouble pinning down an issue with just one part of a page. I can't seem to figure out if the issue is a css issue or an HTML issue. I have a tab that is under a picture that has a floating height and fixed width. Under the picture when the page first loads a div element that is supposed to be a css tab seems to float over it until I reload the page. When the page is reloaded the tab moves back to its static position. This only happens in IE7 by the way. Hey all, I have a small problem. In my webpage stylesheet I have set the <input> tag as having a solid border of 1 in black. Now when I do text boxes this is fine. But when i do checkboxes it looks stupid so how do it so that on some input tags it works and other input tags it doesn't. Thanks in advance. I am pretty new to semantic HTML and just started. I used to put a lot of stuff in the html instead of the css. I have now made a semantic html website which works perfectly in IE, but not in the other browsers I've tried (FF, NN, Opera). I figure the problems must be in the css, so could you please take a look at it? In the beginning I have a DIV with a background-image, which is the banner of the page. After 160px, a horizontal menu comes on top of that and a little below there will be breadcrums. For now there 2 things to solve: 1. IE places the background/image at the top of where the DIV starts, All the other browsers place the background/image at the first actual content of the page (which is the horizontal menu). If I add a <br> or a dot at the top of the div, the background-images is moved to the right place. But I would like to do it without a <br> or a dot. Is that possible?? 2. The horizontal menu is a series of SPAN's with text in it, the width is set as 19%, and in IE this works. In the other browsers each SPAN is as wide as the text is, though it should be longer. Could you help me find the solution to these problems? The code is posted below, Sjoukje My CSS: Code:
BODY {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0; height: 100%;}
#bgimage {
background-image: url(images/CFD.jpg);
width: 800px;
height: 280px;
margin-top: 20px}
#midimage {
background-image: url(images/contentbg.jpg);
width: 800px;
height: 110%;
background-repeat: repeat-y;
overflow: hidden;}
#underimage {
background-image: url(images/contentbottom.jpg);
width: 800px;
background-repeat: no-repeat;}
#margin_top {
margin-top: 180px;}
#hoofdmenu {
width: 100%;}
.menu_item1, .menu_item2, .menu_item3, .menu_item4, .menu_item5 {
font-size: 10pt;
font-weight: bold;
width: 19%;
height: 15px;
text-align: center;
vertical-align: middle;
padding: 1px;
color: black;
text-decoration: none;}
.menu_item1 {background-color: #3CBF02; }
.menu_item2 {background-color: #0059D3; }
.menu_item3 {background-color: #FFF10C; }
.menu_item4 {background-color: #ff6c00; }
.menu_item5 {background-color: #CB0000; }
.mouseover1, .mouseover2, .mouseover3, .mouseover4, .mouseover5
{ font-size: 10pt;
font-weight: bold;
width: 19%;
height: 15px;
text-align: center;
vertical-align: middle;
padding: 1px;
color: black;
text-decoration: none;}
.mouseover1 { background-color: #45de01;}
.mouseover2 { background-color: #006cff;}
.mouseover3 { background-color: #fff998;}
.mouseover4 { background-color: #ff8400;}
.mouseover5 { background-color: #eb0101;}
a.menu {
color: black;
text-decoration: none;}
#breadcrums {
float: left;
margin-top: 35px;
margin-right: 10px;
margin-left: 200px;
font-size: 7pt;
font-weight: bold;
text-decoration: underline;
text-align: left;
color: Gray;}
p {font-size: 10pt; }
#boxes { float: left;
width:200px;
text-align:left;
padding: 23;
margin-top: -23px;}
.box110, .sub_cfd, .sub_act, .sub_art, .sub_4, .sub_cont {
background-repeat: no-repeat;
padding: 6px;
text-align: left;
font-size: 8pt;}
.box110 { background-image: url(images/menulinks110.jpg); height: 120px;}
.sub_cfd {background-image: url(images/sub_cfd.jpg);
height: 156px;}
.sub_act {background-image: url(images/sub_act.jpg);
height: 156px;}
.sub_art {background-image: url(images/sub_art.jpg); height:
156px;}
.sub_4 {background-image: url(images/sub_4.jpg); height:
156px;}
.sub_cont {background-image: url(images/sub_cont.jpg);
height: 156px;}
p.box_main_text {
font-size: 8pt;
padding: 4px;
margin-top: -10px;}
.box_top_black, .box_top_white {
font-size: 8pt;
font-weight: bold;
text-align: left;
margin-left: 5px;
margin-top: 8px;}
.box_top_black { color: black;}
.box_top_white {color: white;}
#spacer {height: 140px;}
ul.box_list {margin-left:6px; list-style-type: none;}
#content {float: right;
margin-right: 20px;
margin-top: -4px;
width: 570px;
font-size: 10pt;
text-align: left;
vertical-align: top; }
#footer {
margin-left: 210px;
text-align: center;
font-size: 8pt;
color: Gray;
height: 30px;}
p.agenda_top {
font-size: 14pt;
color: black;
text-align: left;
vertical-align: top;}
p.agenda {
font-size: 7pt;
text-align: left;
color: navy;}
ul.agenda_list {
list-style-type: none;
margin-left: 0px;}
td{
width: 13%;
height: 50px;
vertical-align: top;
background-color: white;
padding: 5px;}
The html Code: <HTML> <HEAD> <LINK rel="stylesheet" href="../simpel.css" type="text/css"> </HEAD> <BODY> <DIV align="center"> <DIV id="bgimage"> <DIV id="margin_top"> <SPAN class="menu_item1" onmouseover="this.className='mouseover1'" onmouseout="this.className='menu_item1'"> <A href="../cfd/cfd.html" class="menu">CFD</A></SPAN> <SPAN class="menu_item2" onmouseover="this.className='mouseover2'" onmouseout="this.className='menu_item2'"> <A href="../activiteiten/agenda.html" class="menu">Activiteiten</A></SPAN> <SPAN class="menu_item3" onmouseover="this.className='mouseover3'" onmouseout="this.className='menu_item3'"> <A href="../artikelen/index.html" class="menu">Artikelen</A></SPAN> <SPAN class="menu_item4" onmouseover="this.className='mouseover4'" onmouseout="this.className='menu_item4'"> <A href="" class="menu">nogiets</A></SPAN> <SPAN class="menu_item5" onmouseover="this.className='mouseover5'" onmouseout="this.className='menu_item5'"> <A href="../contact/contact.html" class="menu">Contact</A></SPAN> <DIV ID="breadcrums">><A href="../index.html">Home</A></DIV> </DIV> </DIV> <DIV id="midimage"> <DIV id="boxes" > <DIV align="center" class="sub_cfd"> <DIV><P class="box_top_white">Activiteiten:</P></DIV> <DIV> <UL class="box_list"> <LI>-CFD?!</LI> <LI>-Visie</LI> <LI>-Geloofsgetuigenis</LI> <LI>-3 Rotsen</LI> </UL> </DIV> </DIV> <DIV id="spacer"></DIV> <DIV align="center" class="box110"> <DIV><P class="box_top_white">Meer CFD</P></DIV> <DIV> <UL class="box_list"> <LI>-Webwinkel</LI> <LI>-HisBride Ministries</LI> <LI>-Forum</LI> <LI>-Creative Expressions</LI> </UL> </DIV> </DIV> </DIV> <DIV id="content"> <H2>Content</H2> <P>Content (removed for now)</p> </DIV> </DIV> <DIV id="underimage"></DIV> <DIV id="footer">© Christian Fellowship Drachten</DIV> </DIV> </BODY> </HTML> I have designed a site recently and have two small problems left to sort out. The first is that I have a div full of thumbnails, under some of these I have a small 'new' to show that this image is new. This works fine in Safari/Firefox/Mozilla, and also works in IE 5+ with help of the box model hack, however IE6 posistions the text in the middle of the thumbnails. You can see this at www.marcelbaker.com/portfolio.php A sample of the html for this is Code: <div id="container1"> <div id="float"> <div id="drinks"><a class="selected" href="/portfolio.php?page=1&old="><br /><p class="new">new</p></a> </div> </div> </div> The css for the thumbails is: Code:
#float {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
#float a {
width: 45px;
float: left;
padding: 0;
margin: 0;
height: 45px !important;
height /**/:45px; /* for IE5/Win only */
}
#float a:hover, #float a.selected {
width: 45px;
background-position: -45px 0;
}
#float a:active {
width: 45px;
background-position: 0 0px;
}
.new {
text-align: center;
font-size: 9px;
color: #BB0000;
text-align: center;
margin-top: 41px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family: inherit;
margin-top: 27px;
}
With each of the thumbnails having its own rule to show its image and create a rollover effect. ie Code:
#drinks a {
margin: 0px 17px 0px 0;
background: url(path/to/image.jpg) top left no-repeat;
margin: 0px 17px 0px 0;
voice-family: "\"}\"";
voice-family: inherit;
margin: 0px 17px 10px 0;
}
html>body #drinks a{
margin: 0px 17px 10px 0;
}
Any ideas on this? My other problem is that on the clients section www.marcelbaker.com/clients.php All the thumbnails appear 4 across a row (if applicable) except for Group M, here it only displays 3 on a line although the html and css is the same for all the client pages. I've check to make sure the images aren't wider or anything like that. This is a real head scratcher, I've been trying to figure this out for days with no luck. I really appreciate your help on these problems. Many Thanks Kieran Hello, I have a site, http://wwww.catskaraoke.com And all text is underlined, even with inline styles that say "text-decoration:none" I have gone through the style sheets and added "text-decoration:none" to ever class id and tag. In all other browsers, the text is fine, but in IE7 the text is underlined. Why is this? I am going crazy. thanks I'm having a problem with CSS in IE8. I'm designing a page in C# that I want to have tabs, and found a template that I made compatible with ASP.NET (albeit a bit messily). I need this to look good in Firefox 3, IE8, and Safari, and while it looks great in FF3 and Safari, IE8 is having some problems. Is there a quick hack to make it IE quality that anyone can figure out? I've been trying for awhile but I'm stumped... The HTML/ASP.NET is: <div id="tabbar"> <ul> <asp:Panel ID="Panel1" runat="server" CssClass="tabitemLSel"><a><asp:LinkButton ID="LinkButton1" OnClick="ChangeView" CssClass="tabitemRSel" runat="server" Text="Live Questions" /></a></asp:Panel> <asp:Panel ID="Panel2" runat="server" CssClass="tabitemL"><a><asp:LinkButton ID="LinkButton2" OnClick="ChangeView" CssClass="tabitemR" runat="server" Text="Ask a Question" /></a></asp:Panel> <asp:Panel ID="Panel3" runat="server" CssClass="tabitemL"><a><asp:LinkButton ID="LinkButton3" OnClick="ChangeView" CssClass="tabitemR" runat="server" Text="Answered Questions" /></a></asp:Panel> </ul> </div> and the CSS is: #tabbar { float:left; width:100%; /*background:#DAE0D2 url("bg.gif") repeat-x bottom;*/ background: url("bg2.gif") repeat-x bottom; font-size:14px; line-height:normal; } #tabbar ul { padding:10px 10px 0; list-style:none; } #tabbar a:hover { color:#333; } .tabitemL { float:left; background:url("left.gif") no-repeat left top; margin:0px 0px 0px 0px; padding:0px 0px 0px 9px; } .tabitemR { float:left; display:block; background:url("right.gif") no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#765; } .tabitemLSel { float:left; background:url("left_on.gif") no-repeat left top; margin:0px 0px 0px 0px; padding:0px 0px 0px 9px; border-bottom: solid 1px white; } .tabitemRSel { float:left; display:block; background:url("right_on.gif") no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color: #333; } like mostpeople i mademy site using FF and it worked fine till i tried it on IE. the URL is http://wakefieldfhs.co.uk/stu/snap/index.php the inital problem is in F the .main class shows at 100% but in IE it shows only to the scale of the text. also the links are in the wrong position too! any ideas? -----CSS------- Code: a:link {
color:#0099FF;
text-decoration:underline;
font-weight:bold;
font-family :Verdana, Tahoma, Arial ;
}
a:visited {
color:#0099FF;
text-decoration:underline;
font-weight:bold;
}
a:hover {
color:#0099FF;
text-decoration:underline;
}
a:active {
color:#0099FF;
text-decoration:underline;
}
body
{
background-color:#CCCCCC;
font-family: Arial, Helvetica, sans-serif;
}
.header
{
background-color:#000000;
color:#FFFFFF;
width:100%;
height:15%;
}
.links
{
top:10%;
float:left;
}
.status
{
width:30%;
background-color:#FFFFFF;
}
.main
{
background-color:#FFFFFF;
height:100%;
}
.logo
{
float:left;
position:static;
}
.footer
{
background-color:#000000;
width:100%;
height:20px;
margin: 0 auto;
color:#FFFFFF;
bottom:0px;
}
label
{
float: left;
width: 120px;
font-weight: bold;
}
input
{
width: 180px;
margin-bottom: 5px;
font: 11px Verdana, Sans-Serif;
}
#wrapper
{
width: 75%;
height:70%;
margin: 0 auto;
background-color:#FFFFFF;
border-color:#000000;
top:0px;
position:absolute;
left:12.5%;
}
#login-box
{
float: right;
}
I have a div within a div, I set each to 790px wide and a border around the "container". My image is about 2px wider than the "container" width in IE. This is not the problem in firefox. If I shorten the width of the image by 2px, then it looks dumb in firfox. Any insight would be appreciated. Thanks. <body onload="load(); load2()" id="body1"> <table class="td1" cborder=0> <tr> <td class="td1"> <div class="container" id="container"> <div class="banner"> <img id="index1" src="images/index1.jpg"/> </div> ... div.container { position: relative; top: -3px; background-color: white; text-align: left; width: 790px; border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; } .banner { position: absolute; width: 100%; left:0px; } Hello all. I really appreciate all the help this board offers. I've finally gotten a decent handle on CSS and have decided I'm DONE with tables. I haven't used them AT ALL in my last several designs. What I don't have a handle on is how to make my designs work with IE. In my past designs, I tested with IE as I built but later I decided, "why build a site to work with a sub-standard browser" and I moved on to test with firefox. As a result, I have to fix the "problems" inherent with IE. Could someone please take a look at my test site and tell me what I need to fix/change in order for it to work with IE? Thanks in advance, Ryan hi, sorry for the non descriptive subject but i couldn't figure out what to say. I'm having two problems with my site, neither major but I would like to get them working. First off and more serious, I have the infamous 3px jog in IE, but for some reason the holly hack isn't fixing this one. site is at http://seektheeout.com/heroes/ if you want to see, its between the menu and the main window. rollover the menu to make it stand out more. I did figure out one method of fixing it, which was to add Code: _position: relative; left: -3px; to that item in the CSS, but thats an unpopular hack and i don't know how other browsers than IE and FireFox treat it. any thoughts on how to make the holly hack or something else easy work? 2nd problem, I would like to have the image on the right about halfway in between the 2 paragraphs. so it would look something like this: Code: texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttext texttexttexttext texttexttexttext texttexttexttext texttexttexttext texttexttexttext texttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext is this possible? I tried putting a margin-top on the image, it moved it correctly but doesn't re-adjust the text to cover the white space. any suggestions appreciated! http://www.bttfpromo.net/tb/ The bottom div...the left child div doesn't want to be the same height as the right child, no matter if I set a height percentage on it or not. Why is that? Also, what can I do to keep IE from raping the upper right divs? |
|||||||