|
CSS - Css Won't Load Unless Rfreshed
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! Similar TutorialsI'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? 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 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'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? 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 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? 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 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? 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. On 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? Dear all, When accessed via http my CSS background images all seem to be loaded by the browser and then cached for future use. So, the first time a page loads it may be a litttle slow but after that it's fine. However, when accessed via https the images never seem to be cached and are always slow to load. The CSS defines the background images with relative paths and does appear to use the current scheme correctly. Images included via the <img> tag don't seem to be affected in the same way: they cache in both scenarios. Does anyone know if this is a limitation of CSS/browsers in general/only some browsers/SSL or maybe a configuration problem somewhere? Thanks in advance! I have footerStickAlt design for my page. Been trying to implement a new page with a big div (gonna be flash video) but it's causing the footer to bounce from bottom of page to middle of page where the big div seems to be ignored. The thing that is really aggrivating is that if you load ctrl-refresh page again, it goes back to bottom, then ctrl-refresh load page again it pops up to wrong spot. Inconsistent like that. Do it 20 times and it pops up like half the time? But it gets stranger. When the footer pops up (those page loads when IE7 is ignoring the big div height) just adjusting the size of window causes the footer to go back to bottom where it belongs. This type of buggy inconsistent behavior is not occurring in Firefox. It's really aggravating me. I've seen this before on my main index page where I used to have a div (an advertisement) which was also confusing the IE7 just as it is now. So I removed that div on index page to evade the issue. But I want to get to root cause now and fix the situation. I'm not well versed in CSS, especially not the strange bugs like this that only occur on IE7 and only on first page load. Seems it's something to do with IE7 not interpreting the page at load, but it understands when I modify the window size it fixes itself. Please assist o smart computer gods! My apologies in advance for needing to post without validated code. I am using zen cart with a template and am not clever enough to fix the css and html errors that were flagged by W3C. I am not sure my problem has a solution, but it seems to me it should, so please keep the laughter to a dull roar When arriving on my site, the rotating banner (stripviewer) loads underneath the banner that should be to the left of it, before finally jumping into its proper place after a few moments. I am only guessing it is a css issue, for all I know it could be a javascript issue, and I know even less about that. Any help appreciated. Thanks. I posted my link here, but it appears the new poster rule prevents me including a link with bbc code. www . gemni - gems . com http://www.chequedelarealidad.org/ There seems to be a problem with this site when loaded into the Mozilla broswer. When you initially click on the 'Projecten' page, the bottom bar contents are placed about two inches too high up the page. However, when I click the refresh button, this problems corrects itself. Once corrected, the page loads fine every time, but if I clear my web cache and try again, the first time I click on the link the problem appears again. Is there are mistake in my css, or does anyone know how I can correct this? I will appreciate any input. Thank you in advance, Toria I have an input box with CSS positioning on it that only breaks in IE7. The input box is contained in a div that lives inside a <td>. when the pages loads, the input box is out of position. When I click on a checkbox, it immediately slides into the correct position. The strange thing is, the checkbox makes an onclick call to a function that contains JQuery dealing with disabling and enabling the field. No positioning or css is manipulated in that function. It almost seems like the position of that input box is not loading when the DOM loads. However, with that in mind, I used the developer tools for IE7 (the only browser it messes up in) and noticed when the page loads it has the correct values in the CSS style. When I click the checkbox and the input box moves, the values never change. The page doesn't recognize the input box is in the wrong location. Please help!!!!! I am including my CSS below: form div input.fileUploadbox_overlay_FuelSurcharge { position: relative !important; width: 209px !important; margin: 0 55px 0 -288px !important; } When accessed via http my CSS background images all seem to be loaded by the browser and then cached for future use. So, the first time a page loads it may be a litttle slow but after that it's fine. However, when accessed via https the images never seem to be cached and are always slow to load. The CSS defines the background images with relative paths and does appear to use the current scheme correctly. Images included via the <img> tag don't seem to be affected in the same way: they cache in both scenarios. Does anyone know if this is a limitation of CSS/browsers in general/only some browsers/SSL or maybe a configuration problem somewhere? Thanks in advance! I want to use conditional comments to load a style sheet for IE7. When I check the site in IE7 I see images for the content area being placed incorrectly. They are over to the right of the page when they should be in the middle. When I check the images with IE dev bar they have a position of absolute. However the ie_7style.css sheet has them with a position float left. When I link to the ie7style.css without conditional comments and load the page it works as intended. I believe the absolute positioning is coming from the style.css sheet which is intended for Firefox. It seems to me that the ie7style sheet isn't being implemented properly and is relying somewhat on the style.css to render the page. How do I resolve this problem? |
|||||||