|
CSS - Css Seems Like It Doesn't Load...but Only Occasionaly
Hello--I'm trying to solve a problem that I've never been able to reproduce, but my client insists that it happens for them all the time. We've just launched a new site built on PHP and Smarty Templates (I'm posting on this board because I don't think it's a PHP problem...let me know if I'm wrong about that), but with lots of javascript and css.
My client sent me a screenshot (attached) which shows that all of the stylesheet-formatted text is rendered without formatting...it's coming up Times New Roman with default colors. (Please ignore the blue boxes...I masked the identifying features of the image to protect the innocent :-) ). This goes away upon refresh, but it seems to happen (though never to me) often enough that we're worried about it. Has anyone ever seen anything like this? I'll be happy to reproduce any code that anyone's interested in, but I wasn't sure where to start and I didn't want to have to display a bunch of irrelevant code. I searched the boards but couldn't find anything. Thanks in advance. Michael Schmidt Similar TutorialsOn my site I have this on the <head> Code:
<style type="text/css">
@import url('css/style.css');
</style>
It doesn't happen all the time but like once in a while when the css isn't in my cache my page loads without the stylesheet and like half a second later, the stylesheet loads. I was under the impression that this was the purpose of putting things in the <head> of the html document, so they could load beefore anything else. Anyone ever have these issues? Exactly that question. I got this menu from a website. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" media="all" type="text/css" href="http://www.cssplay.co.uk/css/menus.css" />
<title>Godly Menus</title>
<style type="text/css">
#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:360px; background:#000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}
#menu li.sub {background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px;
text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}
#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}
#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}
#menu :hover {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat;
z-index:500; white-space:nowrap;}
#menu :hover > a {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat;
z-index:500; white-space:nowrap;}
#menu :hover ul {position:static; height:180px; margin-top:-1px; background:#383838;}
#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px
solid #fff;}
#menu :hover ul li, #menu :hover ul li a {background:#383838; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #383838 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px
center;}
#menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat
120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat
120px center; color:#ff0;}
#menu :hover ul :hover ul li,
#menu :hover ul :hover ul li a
{background:#666;}
#menu :hover ul :hover ul :hover ul li {background:#666; z-index:500;}
#menu :hover ul :hover ul li.fly a {background: #626262 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#0d72c0; color:#ff0;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul :hover ul li,
#menu :hover ul :hover ul :hover ul li a {background:#888;}
#menu :hover ul :hover ul :hover ul :hover {background:#5184b8; color:#ff0;}
#menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}
.menu_text {float:left; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;}
.menu_text img {display:block;}
.menu_text p {margin:0; padding:5px 10px; line-height:15px;}
</style>
</head>
<body>
<div id="info">
<ul id="menu">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Privacy Policy</a></li>
<li class="sub"><a href="#nogo">Types<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">European</a></li>
<li><a href="#nogo">Indian</a></li>
<li><a href="#nogo">North Africa</a></li>
<li class="fly"><a href="#nogo">American<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">South American</a></li>
<li class="fly"><a href="#nogo">North American<!--[if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Grey tree frog</a></li>
<li><a href="#nogo">Green tree frog</a></li>
<li><a href="#nogo">Spring peeper</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#nogo">Japanese</a></li>
<li><a href="#nogo">Chinese</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Classifications<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="fly"><a href="#nogo">Pelodryadinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cyclorana</a></li>
<li><a href="#nogo">Litoria</a></li>
<li><a href="#nogo">Nyctimystes</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo7">Phyllomedusinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Agalychnis</a></li>
<li><a href="#nogo">Cruziohyla</a></li>
<li><a href="#nogo">Hylomantis</a></li>
<li><a href="#nogo">Pachymedusa</a></li>
<li><a href="#nogo">Phasmahyla</a></li>
<li><a href="#nogo">Phrynomedusa</a></li>
<li><a href="#nogo">Phyllomedusa</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hemiphractinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cryptobatrachus</a></li>
<li><a href="#nogo">Flectonotus</a></li>
<li><a href="#nogo">Gastrotheca</a></li>
<li><a href="#nogo">Hemiphractus</a></li>
<li><a href="#nogo">Stefania</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hylinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Acris</a></li>
<li><a href="#nogo">Anotheca</a></li>
<li><a href="#nogo">Bokermannohyla</a></li>
<li><a href="#nogo">Corythomantis</a></li>
<li><a href="#nogo">Ecnomiohyla</a></li>
<li><a href="#nogo">Hyloscirtus</a></li>
<li><a href="#nogo">Megastomatohyla</a></li>
<li><a href="#nogo">Osteocephalus</a></li>
<li><a href="#nogo">Pseudacris</a></li>
<li><a href="#nogo">Sphaenorhynchus</a></li>
<li><a href="#nogo">Trachycephalus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo9">Rhacophorinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Boophis</a></li>
<li><a href="#nogo">Callixalus</a></li>
<li><a href="#nogo">Chiromantis</a></li>
<li><a href="#nogo">Cryptothylax</a></li>
<li><a href="#nogo">Mantidactylus</a></li>
<li><a href="#nogo">Rhacophorus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Buergeriinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Buergeria</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">References<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li>
<li><a href="#nogo11">Encyclopedia</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Links<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Complete treefrog</a></li>
<li><a href="#nogo">Old World treefrogs</a></li>
<li><a href="#nogo">Amphibian Species</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<div class="menu_text"><img src="http://www.cssplay.co.uk/menus/slide_fly/slide/frog.jpg" alt="tree frog" title="" />
<p>Tree frogs are frogs of the families Hylidae and Rhacophoridae.</p>
<p>There is large variation among tree frog species. Many species are not actually arboreal (do not live in trees), but
terrestrial or aquatic (live on the ground or in the water).</p>
<p>Many arboreal frogs are green, while terrestrial and aquatic species are duller.</p>
<p>They mostly feed on insects and other invertebrates, but some larger species can feed on small vertebrates. The species
within the genus Cyclorana are burrowing frogs, sometimes spending many years underground.</p>
</div>
</div>
</body>
</html>
Any anyway, if I take out the <link> it dissapears!! The CSS in it has nothing to do with the image. Here is the CSS in the <link> tag. Code: #showcase {background:#6f9c6f;}
dl.menus_list dt {background:#6f9c6f; font-size:1.5em; margin:3px 0;}
#foot {background:#8fbc8f;}
dl.menus_list dd.nil {padding:0; margin:0;}
I hate to say it but I'm baffled! Goal: Get all the CSS into the same file as the rest of my code. Edit: Gah kravvitz I've been watching your move through your profile and you signed off!! Gay. Well I hope someone else here can help me solve this issue I'm having... This site..theres supposed to be a menu top-right. In IE it appears then dissappears when page finished loading! freehotsms(dot)com Html code can be viewed from the browser..heres my CSS-its quite messy and long! I think theres an JAVASCRIPT conflict but idk! THANKS..Darned IE..doesnt even support border radius Code: body {margin:0px;
}
input.rad {padding:5px;
background:#0bb9ff;
color:#000000;
font-size:12px;
font-family:Sans-serif;
text-align:center;}
#header {
background:#ffffff;
height:auto;
border-bottom:5px solid #e71b11;
}
#inside {width:100%;
padding-top:0px;
height:211px;
clear:right;
/*border-top:5px solid #e2e2e2;
border-left:5px solid #e2e2e2;
border-right:5px solid #e2e2e2;
-moz-border-radius: 1em 1em 1em 1em;*/
margin-right:auto;
margin-left:auto;
}
#infooter {height:20px;
width:700px;
text-align:center;
margin:auto;
padding-top:10px;
}
#set {width:441px;
margin-right:auto;
margin-left:auto;
background:url(images/info.png);
height:68px;
margin-top:5px;}
td{font-family:arial;
font-size:13px;
}
#out {width:100%;
height:10px;
background:url(images/bottom.png);}
#rightlogin {
float:right;
-moz-border-radius: 0em 0em .5em .5em;
padding:5px;
background:#f7f7f7;
border-left:2px solid #e2e2e2;
border-right:2px solid #e2e2e2;
border-bottom:2px solid #e2e2e2;
margin-right:80px;}
.right_ad{height:80px;
width:auto;
float:right;
margin-top:auto;
margin-bottom:auto;
margin-right:10px;}
.somepadding {padding-left:10px;
padding-right:10px;}
.eco{width:100%;
text-align:center;
padding-right:150px;
}
img.icon{width:60px; height:60px;padding-left:10px;padding-right:10px;}
.center {margin-left:auto;
margin-right:auto;
width:468px;}
.accountbutton {
padding:5px;
background:#0bb9ff;
color:#000000;
font-size:12px;
font-family:Sans-serif;
text-align:center;}
#button {height:17px;
width:80px;
float:left;
-moz-border-radius: 1em 1em 1em 1em;
padding:5px;
background:#0bb9ff;
margin-right:10px;
color:#000000;
font-size:12px;
font-family:Sans-serif;
text-align:center;
}
a.top:hover{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.top:active{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.top:link{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.top:visited{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.in:hover{text-decoration:underline;
color: #448;
font-style:strong;
font-family:arial;
font-size:13px;}
a.in:active{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
font-size:13px;}
a.in:link{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
font-size:13px;}
a.in:visited{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
font-size:13px;}
a.tin:hover{text-decoration:underline;
color: #448;
font-style:strong;
font-family:arial;
}
a.tin:active{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
}
a.tin:link{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
}
a.tin:visited{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
}
a.n:hover{text-decoration:underline;
color:#ffffff;
font-style:strong;}
a.n:active{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.n:link{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.n:visited{text-decoration:none;
color:#ffffff;
font-style:strong;}
#left_logo {width:487px;
height:211px;
background:url(images/logo.png);
float:left;
margin-left:8%;
}
#hold {width:600px;
float:left;
margin-left:346px;
}
#login {width:500px;
margin-right:auto;
margin-left:auto;
background:#f7f7f7;
-moz-border-radius: .5em .5em .5em .5em;
margin-bottom:10%;
margin-top:20px;
padding:5px;
border:2px solid #e2e2e2;
}
#log {background:#f7f7f7;
padding:10px;
}
input.o {height:35px;
width:300px;
font:28px arial;
border:1px solid #cecece;}
input.o:hover {height:35px;
width:300px;
font:28px arial;
border:1px solid #ffd35b;
background:#feff9c;}
h2.login{
font-family:Georgia;
color:#4E443C;
text-transform: none; font-weight: 100;
font-size:35px;
margin-bottom:20px;
text-align:center;
color: #000;
text-shadow: 0px 1px 1px #fff;
margin-top:10px;
margin-bottom:10px;}
#menu_container {height:25px;
padding:10px;
border-top:3px solid #e2e2e2;
width:auto;
margin-right:10px;
float:right;
background:url(images/menub.png);
-moz-border-radius: 0em 0em 1em 1em;
border-bottom:1px solid #e2e2e2;
border-left:1px solid #e2e2e2;
border-right:1px solid #e2e2e2;
}
.newsletter{background:#ffffff;
width:auto;
padding:8px;}
#menuright{height:25px;
padding-top:80px;
padding:10px;
background:url(images/rig.png);
width:auto;
border-top:3px solid #e2e2e2;
float:right;
-moz-border-radius: 0em 0em 1em 1em;
border-bottom:1px solid #e2e2e2;
border-left:1px solid #e2e2e2;
border-right:1px solid #e2e2e2;}
#menu_button {width:auto;
height:30px;
background:#0bb9ff;
float:left;
color:#ffffff;
font-size:13px;
font-family:Sans-serif;
padding-top:10px;
padding-left:20px;
padding-right:20px;}
#maincont{width:950px;
margin-right:auto;
margin-left:auto;
margin-bottom:10px;
background:#f7f7f7;
min-height:800px;
padding-left:10px;
padding-right:10px;
padding-top:0px;
border-top:2px solid #e2e2e2;
-moz-border-radius: 0em 0em .8em .8em;
border-left:2px solid #e2e2e2;
border-right:2px solid #e2e2e2;
border-bottom:2px solid #e2e2e2;
}
#bore {float:left;
width:172px;
height:74px;
background:url(images/bore.png);
clear:right;
margin-top:98px;
margin-right:10px;
}
.boretext {margin-top:34px;
text-align:center;
font-family:Georgia bold;
color:#ffffff;
font-size:15px;}
#rightcolumn {width:250px;
background:#f7f7f7;
min-height:600px;
padding-right:10px;
float:right;
margin-bottom:10px;}
#social{padding-top:10px;
padding-bottom:24px; width:190px; margin-right:auto; margin-left:auto;}
#centercolumn {width:655px;
padding:10px;
min-height:500px;
float:left;
height:auto;
background:#f7f7f7;
margin-bottom:10px;
}
/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */
/*--------------------------------------------------
REQUIRED to hide the non-active tab content.
But do not hide them in the print stylesheet!
--------------------------------------------------*/
.tabberlive .tabbertabhide {
display:none;
}
/*--------------------------------------------------
.tabber = before the tabber interface is set up
.tabberlive = after the tabber interface is set up
--------------------------------------------------*/
.tabber {
}
.tabberlive {
background:#ffffff;
margin-top:1em;
min-height:500px;
.6em .6em 0em 0em;
}
/*--------------------------------------------------
ul.tabbernav = the tab navigation list
li.tabberactive = the active tab
--------------------------------------------------*/
ul.tabbernav
{
margin:0;
padding:10px;
background:#f7f7f7;
font: bold 12px Verdana, sans-serif;
}
ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
-moz-border-radius: .6em .6em 0em 0em;
}
ul.tabbernav li a
{
padding:10px;
margin-left: 3px;
-moz-border-radius: .6em .6em 0em 0em;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}
ul.tabbernav li.tabberactive a
{
background-color: #fff;
}
td.images {text-align:center; color:#448; font: bold 12px Verdana, sans-serif;}
ul.tabbernav li.tabberactive a:hover
{
color: #000;
background: white;
-moz-border-radius: .6em .6em 0em 0em;
}
/*--------------------------------------------------
.tabbertab = the tab content
Add style only after the tabber interface is set up (.tabberlive)
--------------------------------------------------*/
.tabberlive .tabbertab {
padding:5px;
-moz-border-radius:.6em .6em .6em .6em;
border-top:0;
/* If you don't want the tab size changing whenever a tab is changed
you can set a fixed height */
/* height:200px; */
/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */
/* overflow:auto; */
}
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}
#leftcolumn {
margin-right:0px;
background:#f7f7f7;
min-height:500px;
float:left;}
.intro {height:auto;
border:2px solid #e2e2e2;
background:#f7f7f7;
margin:20px;}
.holdvideo {margin-left:auto;
width:400px;
margin-right:auto;}
.int{width:450px;
padding:10px;
margin-right:auto;
margin-left:auto;}
.testing {font-size:12px;
color:blue;
float:right;
margin:6px;
font-family:Verdana;
}
.anothercontain{width:350px;margin-right:auto;margin-left:auto;}
.containbutton {float:right;}
.containbuttonl {float:left;}
td.buttnreg {float:right;
margin:6px;
height:50;
text-align:center;
background:url(images/late.png);
border:3px solid #ffffff;
-moz-border-radius: 1em 1em 1em 1em;
padding-top:11px;
padding-bottom:11px;
width:180px;
color:#0261ab;
font-family:Verdana;
font-size:14px;
font-style:strong;
padding-right:6px;
padding-left:6px;}
td.buttnreg:hover {float:right;
margin:6px;
height:50;
text-align:center;
background:url(images/late.png);
border:3px solid #ffffff;
-moz-border-radius: 1em 1em 1em 1em;
padding-top:11px;
padding-bottom:11px;
width:180px;
color:#ffffff;
font-family:Verdana;
font-size:14px;
font-style:strong;
padding-right:6px;
padding-left:6px;}
.scroll{overflow:auto;
height:600px;}
p.red{
font-family:Serif bold;
text-shadow: 1px 1px 2px #fff;
font-size:20px;
color:#000;
padding-bottom:6px;
margin-bottom:5px;
padding-top:6px;
text-align:center;
background:#f3f3f3;
border:2px solid #e2e2e2;
}
p.black{text-shadow: 2px 2px 3px #818173;
font-family:arial;
font-size:16px;
color:#000;
padding-bottom:10px;
margin-bottom:5px;
padding-top:16px;
text-align:center;
}
p{font-family:Verdana;
font-size:13px;
color:#000000;
margin-top:0px;
}
p.small{font-family:Sans-serif;
font-size:12px;
color:#5f5f55;
line-height:160%;
margin-top:0px;
}
p.blue{color: #448; font: bold 14px Verdana, sans-serif;}
ul {font-family:arial;
font-size:16px;
line-height:15px;
list-style-image: url(images/arrow.png);
margin-right:7px;
color:5f5f55;}
li {margin-top:7px;
margin-bottom:7px;}
#footer {-moz-border-radius: 1em 1em 0em 0em;
background:#f7f7f7;
height:40px;
clear:left;
clear:right;
border:2px solid #e2e2e2;
width:970px;
margin-right:auto;
margin-left:auto;
}
#contain {width:900px;
margin-left:auto;
margin-right:auto;}
table.fh {border-collapse:collapse;
font-size:13px;
color:#ffffff;
text-decoration:none;
width:950px;
}
.foothead { border-bottom:1px solid #f3f3f3;
height:30px;
}
tr.top {padding-top:4px;
font: strong Georgia,serif;
font-size:15px;
}
th.top {height:30px;
padding-right:50px;
text-align:left;
font: strong Georgia,serif;
font-size:15px;}
td.t {padding-right:50px;
font-style:strong;
padding:2px;
}
I'm back... I want to click on a link and display a group of images (thumbnail) in a CSS box on the same page. For instance: lets say I have two links on my web page. I want to load different thumbnails in the same page depending upon which link I click. Make sense? *insert newbie stuff here* got something i want to do in css that i dont even know if its possible. last time i did was in php and forgot how.lol. ok i have a side box div that i want to put links to images in and i want the images to load in another div box on the same page. so it opens the photo, just in a certain place on the page (in div id or position:absolute) is this possible in anyway? I have added CSS using the CoffeeCup application & believe I have succeeded....with one exception. 1 - If one goes to www.TuscanHills.co.uk/css, the CSSs load..... excellent! 2 - If one follows a link, the new CSSs don't appear on the new page. 3 - If one then does a PAGE REFRESH, the CSSs appear. .........tell me I've been stupid .........tell me I've made the same error every beginner does .........anything! Just help! I'm having an issue where I'm displaying 3 image lines that should be inline, but on the first time the page is loaded in Firefox, the images are displayed on multiple lines (I've gotten it down to the 3rd images being displayed on a 2nd line). Once I refresh the page, the issue is gone and all 3 images sit in a row. Here's how it looks on first load : ads_bad.jpg And here's how it should look: ads_good.jpg Here's the HTML... Code: <div id="promo_ads"> <a href="#"><img src="../../Promos/deluxsprayer.jpg" alt="Promo Ad" class="promo_img"></a> <a href="#"><img src="../../Promos/halloweencandy.jpg" alt="Promo Ad" class="promo_img"></a> <a href="#"><img src="../../Promos/lawnandgarden.jpg" alt="Promo Ad" class="promo_img"></a> </div> And the relevant CSS Code:
#promo_ads {width:100%; display: block; clear: right; float: left;}
img .promo_img {display: inline; clear: none; float: left;}
Does anybody know why this is an issue in Firefox on the first load of the page? I'm designing a site: http://bargainboys.ca I use a lot of DIVs and stylesheets. The website looks great in chrome/safari/firefox... but it doesn't even load in IE! And I can't seem to narrow down the problem, even if I add/remove one element at a time. Can someone provide any feedback if they've had a similar experience? Much appreciated guys. I'm having some trouble around the bottom of one of my pages, where the CSS is not placing images correctly the first time the page loads. Frequently the footer is not attached to the bottom as it should be, but floating some varying number of pixels off the bottom. If I hit 'refresh' everything snaps into place as it should, but for some reason the first time it isn't working right. Here's the page I'm referring to: http://www.auroratheatre.org/show.php?prod_id=23&ref=seas (you can change that prod_id number to see the page with different queries) The photos are all pulled from a MySQL query, and the code to display them goes something like this: PHP Code: <html> <body> <div id="wrapper"> <div id="content"> <div id="col"> .... </div> <div id="main"> ... <h1>Cast</h1> <div id="cast"> <ul> <?php do { ?> <li><img src="images/headshots/<?=$row_bios['headshot']?>" /></li> <?php } while ($row_bios = mysql_fetch_assoc($bios)); ?> </ul> </div> <div class="clear"></div> <ul style="padding-top: 10px"> <li><a href="show_bios.php?prod_id=<?=$prod_id?>">read all the bios here</a></li> </ul> <div class="clear"></div> </div> <div id="photocol"> <img src="images/rightpics/<?=$rightpic?>" width="217" height="470" /> </div> </div> <div class="clear"></div> <div id="footer">...</div> </div> </body> </html> and the relevant CSS is he Code: html, body, #wrapper {
min-height: 100%;
width: 100%;
height: 100%;
}
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 80%;
color:#000;
background-color:#F8ED97;
margin: 0 auto;
}
#wrapper {
padding: 0px;
background-image:url(../images/back.gif);
background-position:center;
background-repeat:repeat-y;
position: absolute;
text-align: center;
}
html>body, html>body #wrapper {
height: auto;
}
#content {
width: 774px;
margin: 0px auto;
text-align: center;
margin-bottom: 30px;
}
#col {
width: 130px;
background-color: #900;
float: left;
}
#main {
width: 403px;
float: left;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 30px;
text-align: left;
}
#photocol {
width: 220px;
float: left;
}
#footer {
width: 100%;
background-color:#000;
position: absolute;
bottom: -2px;
left: 0px;
text-align: center;
}
.clear {
clear: both;
}
#cast ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#cast li {
display: block;
width: 100px;
float: left;
text-align: center;
line-height: 70%;
}
This happens in both IE and FF - anyone have any idea what's going on, and how I could get it to load correctly the first time? Thanks, Daniel I have a div that uses overflow:scroll to allow a large amount of text to fit into a small space. Is there a way to make it so that when this div is loaded, it will scroll to the bottom of its contents instead of starting at the top by default? Thanks for any help. Hi, I'm trying to password protect the contents of a directory using .htaccess and .htpasswd. The authorization seems to work but neither the images nor the css style files are loaded, so the pages look all messed up. I've tried with both IE and Mozilla but the problem seems not to be browser dependent. Does anyone know if there's anyting I can do on the server side to solve this issue? Thanks a lot for any help you can give. adriA I'm using CSS for style and positioning. I have this information in my style.css file. I import the file into my html file with this code: PHP Code: <head> <style type="text/css" title="currentStyle"> @import "style2.css"; </style> </head> When calling the page with the MS Internet Explorer, it first writes all the text out unformatted and then it applies the format. I know it does it this way because I can see it. It is too slow. Sometimes, it's just a flash, other times it's a whole second or two. Regardless, I don't even want to notice the flash from unformatted to formatted. I notice that other pages don't seem to do this. How do I accomplish this? What am I doing wrong? If you display: none an image, will it load in the page? That goes for any content, really... will it not load until you display: block it via javascript? In what order are CSS/html files loaded? Concurrently? What about browser rendering? Must all CSS be loaded before any html is rendered? Also aside from serverside compression / css whitespace (file) compression, removing redundant classes, and using relative paths, is there any other ways to speed loading of CSS? Would it be of benefit splitting my css file into smaller chunk files - would they all load concurrently and therefore faster? Does anyone have a good solution for forcing the cache of css files, but not the html calling the css? Thanks in advance! Ross I downloaded a free layout and started using it for my club's website. After finishing several pages, I uploaded it to the school's server. However, I realized that after publishing it, the layout does not look right. It is supposed to look like this (I had to insert spaces to get around no URL postings for newbs) https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/howitssupposedtolook.jpg Unfortunately, it looks like this https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/index.html As you can see, there are several layout issues. First, the background color inside the white border is not the lighter green color. Also, the border is missing on the right hand side. If anyone can shed some light on this issue, I would greatly appreciate it! In case you can't pull up the CSS document, it is https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/FlexibleGreen.css I've just run my site through the W3C CSS validator and I'm getting an error telling me I need to validate my XML document? So, how do I validate my XML document, and where do I put the </link> tag it tells me I need? I fear this is just the start of my problems here's the validator link: http://jigsaw.w3.org/css-validator/...&usermedium=all (please note, i'm a noob).. What i have right now: ################ HTML: ################ <div id="aboutusimage"></div> ################ CSS: ################ #aboutusimage { width:400px; height:75px; background-image:url(/images/about.jpg); position:relative; left:189px; top: 4px; margin-bottom:30px; } ======================== What i'd like to have: ################ HTML: ################ <div id="banner" class="about"></div> ################ CSS: ################ #banner { width:400px; height:75px; position:relative; left:189px; top: 4px; margin-bottom:30px; } #banner.about { background-image:url(/images/about.jpg); } ====================== For some reason, the image disapears when i do this :\ Any advice? Once again my developement is stalled with the interactions of my website with the multitude of browsers... Firebird... displays perfectly everytime without a doubt... I'm beginning to wonder why I even bother looking testing it in that browser becuase nothing is ever wrong. Internet Explorer, on the other hand, is a different beast entirely. Basically I'm trying to set up a div element that uses a semi opaque background... something between 75-85%, such that the background of my website shows through. So what I decided to do was make a graphic ( in Interlaced PNG format ) that would match my needs. As mentioned above there are some display issues in IE. I was wondering if there is a way to control the alpha level of element backgrounds without setting up/or using graphics, ( the less bandwidth the better ). Regards, I have a table. It's a nice table, presenting its data in a clean, semantic manner. Great, so I wanted it to be a pretty table too. And I did that (problematic lines commented out for comparison): Table with some CSS (Link no longer active). Then I thought about function again. I wanted a scrolling table (Note that this was never meant to work in the obsolete IE). I added "height: 100px; overflow: auto;" to the tbody's CSS. That's when I ran into problems: Table with only two lines of CSS added (Link no longer active). Problems: There is a horizontal scrollbar. It appears to be making up for the space that the vertical scrollbar takes up. My nice cell borders are no longer in the tbody, but instead stick out of the table, overlapping anything that comes after. Interestingly enough, although the height declaration is required in order to show scrollbars, if I only add the overflow style, I still get that nasty border chaos. I am using Firefox. Any ideas on how to fix/overcome/avoid these problems? This is really bugging me. |
|||||||