|
CSS - Baffling .css Caching Issue - Please Help
I am working on a site, http://callagy.netdbs.com It seems when ever I open a page, make a change, it works just fine insofar as the change is made. BUT, if I make a change to the style sheet (style.css), the change is not effective in the site until I save it as something else,then change the ref. to it in a given page. I then need to go back and save the css file back to style.css so I can see the chagne site wide.
Tom Similar TutorialsPlease look at this page in IE - http://www.downtowntransmission.com/diagnosis.asp For whatever reason there seems to be some strange width issue going on with the cell in red. The title Origin of Noise should be on one line and I can not figure out why it is not. It is fine in FF and Chrome Hi, I have just redesigned http://www.harvardbarcourse.com using HTML/CSS and am having two very important Firefox compatibility problems. 1. The links on the left side of the page and in the page body are not clickable. I have no idea why and have tried everything to rearrange divs to no avail. My code looks valid and I'm not sure what Firefox is doing (it works in IE). 2. Not as important: the whole layout is left-aligned in Firefox (instead of centered like in IE). I used Dan Cederholm's tip for CSS certering (http://www.simplebits.com) but it seems not to have worked. Any ideas why? Any ideas you have would be greatly appreciated. Thanks! Kristopher Hello, I seem to have a problem whereby IE6 isn't caching images called from my external CSS file/s at http://www.dragonflyoffice.co.uk/. In FF, if you visit the site and go elsewhere or close the browser before returning to the site, the page loads instantly but IE seems to download pages and images each time. I'm afraid this is hampering the expeience for users without high speed connections. Does anyone else know about this? I've trawled the web and found nothing Hi, we've been having a problem since about the start of this year, and i was wondering if someone could help us? When we make changes to our styles sheets they appear to be cached, and the changes dont appear for sometime, clearing the cache of either IE or FF doesnt seem to help, ctrl-f5 doesnt seem to help. A few things that can sometimes help are navigating to the stylesheet itself, press ctrl-f5 then navigating back to the site, but that does not always fix the issue. Also switching between a firefox and ie tab in firefox with the IEtab extension sometimes helps. We are have 3 dedicated servers 1 internal, 2 external, all 3 servers have had the same problem. We have spent several years developing sites on 2 of those servers without problems. No other types of files seem to cache but style sheets are the only files we reguarly change (one of the benefits of moving away from table layouts ). Any help will be greatly appreicated. Does anyone know if when a browser loads a stylesheet, it loads all linked images into the cache - even if they are hidden from view initially? Or do browsers in general wait until the image is required to download it? I'm intrigued because I'm using :hover to do a background image swap. Cheers Can you cache external css files (to make pages that use the same css file load faster)? If so, how? BTW, here is how I currently load my css (from zen garden): Code: <STYLE type=text/css media=all>@import url(/main.css); I'm writing an application that uses stylesheets to display certain items. The user can alter the positioning etc. of these items (which then rewrites the stylesheet for future use), and then reloads the page. Unfortunately the old coordinates are still apllied to the elements in question until I manually hit the browser's reload button, then the new values are used. I'm guessing the style is being cached somewhere? If so can anyone advise how to stop this? thanks p.s. Its just a basic refresh that sorts it out, not a *hard* refresh. ================== I've come up with a fix of sorts. If I write the style out dynamically within the div itself each time then my problem is solved. i have <meta http-equiv="cache-control" content="no-cache" /> in my head, but i DO want people to cache my .css file because that means less loading time for them. HOWEVER, only if it is not new. is that possible? 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 Whenever I roll out a new feature (including new layout) to the production version of a website I am working on, I know that it won't properly work until a user downloads a new version of the relevant CSS files. For new users this happens automatically, but existing users have to wait or hit refresh. The result is that the pages look bad for some users when I make changes. I would fix this problem by renaming the CSS files whenever I make changes, but this can get a bit unwieldy since I use SVN for source code management. I would have to make a revision to other source code files solely to reflect a change in the CSS file. Another idea is to control the name of the CSS file from a constant or from my database, but each has its downsides (complexity, performance in the case of the db calls). Is there any easy way to have caching of CSS files, but somehow break through that cache when I make changes? I am guessing not since the cache is based on expiration settings set by Apache, which to be meaningful need to be long. But if you have encountered this issue before, I'd love to hear what you did! 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! 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>
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 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. Hi there, I need to use transparent PNGs in this site I'm building. That's sweet when using Mozilla and Opera but for IE I'm using DXImageTransform.Microsoft.AlphaImageLoader. My problem is that I'm using this in a text link area and the PNG is the background. Whenever I apply the filter the PNG actually becomes transparent (yey for that) but (there's always a but with IE) I loose all the links inside the div area (text still there but does nothing at all). If I remove the filter the links get back online. Any help REALLY appreciated. Best regards Hugo Hi to all I am having some issues with a few of my sites... they all work fine on PC and on IE and FF etc. but last time i viewed one of them on a MAC while i was overseas it had some errors where i use CSS tags for bg tiled images... my portfolio is at http://www.blackdropdesign.com/portfolio.html is it possible for someone who uses a mac to quickly run through these and let me know which ones arent working and why...? is there any way for me to see what my site would be looking like on a mac from my PC? cheers! Hello all On the following page: http://planning.northumberland-national-park.org.uk/ if viewed in Mac IE (I believe version 5.0), the dotted lines below each left-hand menu item extend beyond the width of the menu across the whole of the main frame. The menu is a <ul>. The CSS is located at http://planning.northumberland-national-park.org.uk/css/style.css. Does anyone have any ideas? Thanks Tom When I resize the browser then scroll across my div tag images move along. Last time I fixed this problem with "min-width:100px;" etc but now it won't work. Hoping someone can figure out this problem :P <html> <head> <link rel="stylesheet" type="text/css" href="layout.css"/> </head> <body bottommargin="0" leftmargin="0" topmargin="0" > <div id="designLayout" align="center"> <img src="echo_rain.jpg" alt="" /> <div class="button_facebook"> <form> <input type="button" value="" class="button_fb" onclick="window.location.href='()"> </form> </div> <div class="button_twitter"> <form> <input type="button" value="" class="button_tw" onclick="window.location.href='()"> </form> </div> <div class="button_soundcloud"> <form> <input type="button" value="" class="button_sc" onclick="window.location.href='()"> </form> </div> <div class="button_youtube"> <form> <input type="button" value="" class="button_ut" onclick="window.location.href='()"> </form> </div> </div> </div> </body> </html> @charset "utf-8"; /* CSS Document */ body { background-color:#000; } .button_facebook { top:-135px; left:-230px; width:0px; height:0px; position:relative; } .button_fb { background:url(facebook.png) ; border:none; width:80px; height:80px; } .button_fb:hover { border:none; background:url(hover_fb.png); width:80px; height:80px; } .button_twitter { top:-135px; left:-115px; width:0px; height:0px; position:relative; } .button_tw { background:url(twitter.png) ; border:none; width:80px; height:80px; } .button_tw:hover { border:none; background:url(hover_tw.png); width:80px; height:80px; } .button_soundcloud { top:-133px; left:0px; width:0px; height:0px; position:relative; } .button_sc { background:url(soundcloud.png); border:none; width:75px; height:75px; } .button_sc:hover { border:none; background:url(hover_sc.png); width:75px; height:75px; } .button_youtube { top:-138px; left:115px; width:0px; height:0px; position:relative; } .button_ut { background:url(youtube.png); border:none; width:80px; height:80px; } .button_ut:hover { border:none; background:url(hover_ut.png); width:90px; height:90px; } Cheers in advance. i am trying to make a site for our scholl and i have manged to get it all working, on firefox and opera but on Ie everything is, out of focus or messed up, if you view it in opera or firefox, but ie it does not work, i do know about the ie but it only effects 5.* i am on 6 and it does not work, can anyone help me? http://webzine.dragongamer.net css Code: Original - css Code html { background: #000 url("/images/bg_main.gif") repeat 0 1px fixed; } #sidebar { float: right; /*margin-top: -40px;*/ position: relative; right: 0; width: 255px; z-index: 100; } body { background: transparent url("images/bg_wrapper.gif") repeat-y 50% 0 fixed; color: #333; font: 0.7em/160% Verdana, Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif; } #sidebar .section { background: #747474 url("images/bg_sidebarsection.gif") no-repeat 0 100%; color: #f1f1f1; margin-bottom: 1px; padding-bottom: 5px; } #sidebar h3 { background: #434343 url("images/bg_sidebarsection_heading.gif") no-repeat 0 0; color: #f88600; font-size: 110%; font-weight: normal; letter-spacing: 0.05em; height: 40px; line-height: 42px; margin-bottom: 0.7em; padding: 0 15px; text-transform: uppercase; } * html #sidebar h3 { /* less line-height for IE */ line-height: 40px; } #sidebar .first h3 { background-position: -5px 0; } #sidebar h4 { color: #7c4c24; font-size: 110%; padding: 0 15px; } #sidebar a { color: #f1f1f1; text-decoration: underline; } #sidebar a:hover { background-color: transparent; text-decoration: underline; } #sidebar p, #sidebar ul, #sidebar ol { margin-bottom: 1em; padding: 0 15px; } #sidebar ul { list-style: none; } #sidebar ul a { background: transparent url("images/bg_listitem.gif") no-repeat 0 3px; color: #f1f1f1; padding-left: 16px; text-decoration: none; } #sidebar .alternate ul a { color: #0e3a73; } #sidebar #ad-rightside { padding: 20px 60px; } #navigationbar { background: #f1f1f1 url("images/bg_navigationbar.gif") no-repeat 100% 100%; color: #a4a4a4; float: left; padding-bottom: 2em; width: 173px; } #header { background: #1a1a1a url("images/bg_header.gif") repeat-x 0 0; height: 120px; position: relative; width: 940px; } #navigation { left: 173px; padding-left: 10px; position: absolute; top: 80px; } #searchform { background: transparent url("images/bg_search.gif") no-repeat 10px 7px; left: 0; height: 40px; position: absolute; top: 80px; width: 173px; } #header h1 { background: #c60000 url("/themes/Blue/images/logo.gif") no-repeat 0 0; height: 120px; overflow: hidden; text-indent: 200px; width: 173px; } #header h1.planetlogo { background: #c60000 url("images/planet-logo.gif") no-repeat 0 0; } #header h1 a { position: absolute; left: 15px; height: 40px; overflow: hidden; top: 20px; width: 135px; } #header h2 { color: #fa8900; font: normal 125% "Georgia", "Times New Roman", Times, serif; letter-spacing: 0.07em; position: absolute; left: 193px; top: 34px; width: 270px; } #header a, #header a:hover { color: #fff; text-decoration: none; } /*** Navigation Components ****************************************************/ #navigation ul, #navigation li, #navigation a { float: left; list-style: none; } #navigation a { color: #aaa; font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif; height: 40px; line-height: 40px; padding: 0 10px; text-transform: uppercase; } #navigation a:hover { background: #141414 url("images/bg_navi_hover.gif") repeat-x 0 0; } #navigation .current_page_item a, #navigation .current_page_item a:hover { color: #fff; } #navigation .current_page_item a { background: transparent url("images/bg_navi_selected.gif") no-repeat 50% 100%; } #navigation .feedicon { padding-top: 12px; height: 16px; width: 16px; } /*** Navigationbar Components *************************************************/ #navigationbar h3 { color: #a4a4a4; font-size: 120%; letter-spacing: -0.05em; padding: 0 15px; text-transform: uppercase; } #navigationbar ul, #navigationbar ol { list-style: none; padding: 0 15px; } #navigationbar a { color: #1a1a1a; text-decoration: none; } #navigationbar a:hover { text-decoration: underline; } #navigationbar div { margin: 20px 0; padding: 0; } #navigationbar #archives { margin-bottom: -0.5em; } /*** Search Components ********************************************************/ #searchform input { background: transparent; border: none; color: #999; font-size: 90%; height: 18px; line-height: 18px; margin: 14px 0 0 20px; width: 95px; } #searchform input.focus { color: #000; } * html #searchform input { /** less margin-top for IE */ margin-top: 10px; } #searchform.issafari { background: transparent; } #searchform.issafari input { color: #000; font-size: 100%; height: auto; margin: 10px 0 0 15px; width: 115px; } #searchform button { border: none; background: transparent url("images/bg_searchbutton.gif") no-repeat 0 0; cursor: pointer; overflow: hidden; text-indent: 50px; width: 26px; height: 26px; position: absolute; right: 10px; top: 7px; } #searchform button:active { background-position: 0 -26px; } #wrapper { background: #fff url("images/bg_wrapper.gif") repeat-y 50% 0 fixed; margin: 0 auto; overflow: hidden; padding: 0 12px; width: 940px; } * { margin: 0; padding: 0; } #footer { background: #1a1a1a url("images/bg_header.gif") repeat-x 0 0; clear: both; color: #666; margin-top: 2em; padding: 20px; width: 900px; } /*** Footer Components ********************************************************/ #footer a { color: #fff; text-decoration: none; } #footer a:hover { background-color: transparent; text-decoration: underline; } #footer .feed { background: transparent url("images/icon_feed.gif") no-repeat 0 70%; padding: 0.2em 20px; padding-right: 0; } #pagebody { position: relative; width: 940px; }
|
|||||||