CSS - Image Reloading When I Am Using Font Resize Javascript
Hello Everyboy,
I have a problem with image reloading. In my page, i am using font resize tool. When i click over the icon of font resize, i am changing the stylesheet of the page. But i dont know why, the images in the navbar and header are all reloading. It shouldn't happen. This is happened only in IE when i set settings as 'every visit to the page'. So if anybody know the solution, can you please reply me. Thanks in advance. Edit/Delete Message Similar TutorialsI've got a bit of a problem, in that I'm trying to design a website with a fixed header and lefthand navigation. The buttons I have on the left nav div are entirely image-driven, no text at all. I know that the people who will generally access this website have differing screen resolutions, so I'm also trying to design something that will allow the content to scroll on a lower res monitor while keeping the header and navigation fixed. The problem I run into is keeping the navigation buttons within an acceptable size so that you don't lose some of them off the bottom of the page (remember, it's on a fixed div) on low res monitors. So far that's been okay - the navigation looks fine and all buttons are visible on an 800x600 display (the lowest res I anticipate viewing). However, when I resize the text within the browser, for some reason my navigation menu drops down... more for each resize. To view what I'm talking about, please go he http://www.justusvizslas.com/CrossTies/index.php and resize the text (Ctrl++ in Firefox). With no text contained in the navigation menu, I'm having a hard time understanding why the menu drops down at all upon a text resize. Anyone have a solution, or at least be able to pinpoint within the source where my problem exists? Thanks... I ran across a source code and was playing with it to see how it works. The code from what I can tell is mainly for background images. My questoin is, how can I apply a code that will resize the image within the same css coding. I thought it was pretty cool that you can include a large image as the background and it resizes with the window. Not sure this can even be done so that's why I'm asking. Can it be written to resize any or all the images you place on the page? I've included the coding Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> </title> <style type="text/css"> html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;} #content {padding:5px 300px 20px 200px;} body {font-family:verdana, arial, sans-serif; font-size:76%;} #background{position:absolute; z-index:1; width:100%; height:100%;} #scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} </style> </head> <body> <div> <img id="background" src="bg.gif" alt="" title="" /> </div> <div id="fixed"> </div> <div id="scroller"> <div id="content"> <center> <H1>Header Text Here <br> <img src="header_img.png"><br><br> Text here<br><br> Text Text</h1><br> <img src="Just an image here"> </center> </div> </div> </body> </html> Hello I need to display an image as a background for a table cell I am using the style background-image and it is working fine Here is my problem My table cell has a specific width of 100 pixels The image that I need to display may have a width greater than 100. Is there a way to tell the browser to resize the image to width of 100 pixels and then to display it as a background image? Currently, it just displays the first 100 pixels of the image inside the cell and the rest of the pixels are cut off I must use a background image (background-image) and not an image tag (img) regards Hello, For some reason I'm having difficulty with this, I'm designing a page that needs a background image centered even when the browser is resized like on ask.com. I don't need several different background options, just one background. It seems to me it should be simple enough but I'm having one of those nights. Can anyone point me in the right direction? Thanks, Jasontor I have just moved to working with layers as opposed tables/cells. Previously i had a table with three cells, at 86%, 4%, and 16% widths so it spanned the screen. The first cell's content only partly fills the cell, so when the browser is resized (made smaller), each cell stays on the same line and the table happily resize to the point where it can no longer get smaller before it wraps text I have tried to replicate this using 3 div's of the same width as the cells, with float left, however, the browser can hardly be resized at all from full screen without the third div moving onto the next line. If i make the 2nd and third divs larger it works slightly better, however the content does not look right in the layers Therefore can anyone point out how i might be able to achieve better DIV resize when the browser resizes please. Thanks very much Ed Not sure if this is the right place to ask this but it is sort of a CSS problem. When I change my linked CSS file and refresh the page I'm working on in the browser, the CSS doesn't automatically get refreshed so the changes I've made don't show up. I can force a refresh by using ctrl+F5 but obviously that's no use for a live setting. Has anyone else come across this problem and if so, do you know of a solution? Is there a way to force the browser to refresh the style sheet? Thanks. Hi, I've just spent all night re-building my site as HTML and CSS, since my Joomla site was suffering from a slight case of death due to "hosting issues" during a plaform migration I've got the site looking and working sweet, apart from one small thing. In Netscape 8.1 which I currently have installed, it loads the content in the right of the design right down at the bottom of the screen. When you refresh the browser it jumps back to the top, and it works perfectly for all links !!! It displays superbly in IE all of the time. I've been through the CSS checking that I'm using the clear and float in the right places, and I've checked the actual widths of all of the elements to be sure that they add up to what they are supposed to, but somehow it's still only displaying properly in Netscape after a page refresh. I've put in all of the box model hacks in my code for old browsers. The only thing that stops this from happening is removing the tag "display:table;" in my CSS. But that's used to extend the faux columns down to the bottom of the screen in Netscape. I'm not keen on any of the hacks for extending columns, so I decided on faux columns. The thing is, if it is that tag that's causing it to display incorrectly, why is it having no effect when the page gets reloaded? Try for yourself. Click a link in the menu a few times, then click the refresh button a few times. You will see the content load incorrectly, and then correctly! Puzzling. http://www.acecards.com Code: body { background-color: #999999; margin-left: 0px; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; } #container { width: 750px; /* For browsers with no escapes */ \width: 770px; /* For IE5/Win */ w\idth: 750px; /* For good browsers */ border: 1px solid gray; margin-left: auto; margin-right: auto; padding: 10px; background-color: #000000; } #banner { width: 750px; /* For browsers with no escapes */ \width: 750px; /* For IE5/Win */ w\idth: 750px; /* For good browsers */ height: 251px; background-repeat: no-repeat; clear: both; } #mainarea { clear: both; width: 750px; /* For browsers with no escapes */ \width: 750px; /* For IE5/Win */ w\idth: 750px; /* For good browsers */ background: url(images/fauxcolumns.gif) repeat-y; display: table; } #sidebar { width: 179px; /* For browsers with no escapes */ \width: 179px; /* For IE5/Win */ w\idth: 179px; /* For good browsers */ background-color: #993300; float: left; } #content { margin-top: 0px; float: right; background-color: #FFFFFF; width: 570px; /*For browsers with no escapes */ \width: 570px; /*For IE5/Win*/ w\idth: 570px; /*For good browsers */ } #footer { width: 740px; /* For browsers with no escapes */ \width: 750px; /* For IE5/Win */ w\idth: 740px; /* For good browsers */ padding: 5px; clear: both; } .FooterText { font-family: Verdana; color: #FFFFFF; font-size: 10px; text-align: right; } .Bodytext { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; font-size: 11px; line-height: 17px; text-align: justify; padding-left: 20px; padding-right: 20px; padding-top: 2px; padding-bottom: 2px; } .Bodylink { font-family: Verdana, Arial, Helvetica, sans-serif; color: #499EEE; font-size: 12px; line-height: 17px; font-weight: bold; text-align: left; padding-top: 2px; padding-bottom: 2px; } .Bodyhighlight { font-family: Verdana, Arial, Helvetica, sans-serif; color: #993300; font-size: 12px; line-height: 17px; font-weight: bold; text-align: left; padding-top: 2px; padding-bottom: 2px; } .SideBarBanner { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; line-height:inherit; padding-top: 5px; padding-bottom: 5px; } .SideBarLink { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; } .SideBarHeadingTop { background-color: #FF9B6A; height: auto; width: 169px; /* For browsers with no escapes */ \width: 179px; /* For IE5/Win */ w\idth: 169px; /* For good browsers */ padding: 5px; color: #000000; text-align: center; font-size: 12px; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; border-bottom:thin solid; border-bottom-color:#D74600; } .SideBarHeading { background-color: #FF9B6A; height: auto; width: 169px; /* For browsers with no escapes */ \width: 179px; /* For IE5/Win */ w\idth: 169px; /* For good browsers */ padding: 5px; color: #000000; text-align: center; font-size: 12px; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; border-top:thick solid; border-top-color:#000000; border-bottom:thin solid; border-bottom-color:#D74600; } .SideBarMenuBlock { background-image: url(images/button.gif); background-repeat: no-repeat; height: 26px; margin-top: 4px; margin-bottom: 0px; padding-left: 20px; margin-left: 9px; margin-right: 9px; width: 159px; /* For browsers with no escapes */ \width: 179px; /* For IE5/Win */ w\idth: 159px; /* For good browsers */ text-align: left; vertical-align: middle; color: #000000; font-size: 11px; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; } a:link { color: #000000; text-decoration: none; } a:visited { color: #000000; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } a:active { color: #000000; text-decoration: underline; } .Heading { width: 520px; /* For browsers with no escapes */ \width: 570px; /* For IE5/Win */ w\idth: 520px; /* For good browsers */ padding-left: 40px; padding-right: 10px; padding-top: 15px; padding-bottom: 10px; background-image: url(images/aceofspades.gif); background-repeat: no-repeat; background-color: #FFFFFF; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-align: left; vertical-align: top; font-weight: bold; font-style: italic; } img { border: none; } Hi all, I am trying to replace the frames with CSS on my tree menu page. Was just wondering if it is possible to bring the resize funcationality to the menu as I had in frames (i.e, user could menually resize the frame if required) OR mayb some auto fit- content solution i.e the pane would automatically grow if possible. Thanks, Sameer. i thought it was easy but i cant seem to get a div fit the space it has on my page like.....the size of my page depend on 1 table...the div has to grow till the bottom of that table if i put 100% in the div and things it grows too big maybe im forgetting something I have the following situation: I have a scrolling table, split in two divs. One div contains the header table with column headers, and the data div contains the actual data table. Both divs are fixed in height, but what I would like to do is have the data div resize depending on the number of rows in the data table. I have tried playing with divs' min-height and max-height and these seem to work fine for IE7, FF2 and Safari, but not for IE6 and Opera. Is there any workaround that would be compatible with all mentioned browsers? Thanks! Hi, I am using html and css to design a website. My problem is that when I resize the web browser, all of the elements reposition themselves accordingly. Is there some to keep them all fixed in position? Thanks! hi all, i'm doing a content management system front end form that worked perfectly until i tried the last bit of debugging and found that when resizing the browser it distorted the page... is there a way around this? im fairly new to CSS and have been using relative positioning for my divs. Hi I am rather novice at CSS and what it can do but thought I would see if anyone can offer any feedback. I have been asked to resize the following website: http://www.Ihaveone.org Currently it takes up a third of the window and it is requested to take up the whole window. Is there an easy way to do this? I have downloaded all the files to Adobe GoLive, but am unclear if or how this can be done without redesigning the entire site. Please, any help is greatly appreciated! bufhal I want to have a web page with a list on it that dynamically resizes to fit the browser viewport with a minimum distance between list items. Here's an example I faked in TextPad: Normal view: User enlarges browser: User shrinks browser: How would I accomplish this in HTML/CSS? Thanks! Hello. I am using a Gallery which I bought from ThemeForest. I am having trouble aligning the image to center. Check the second image, It's aligned to left by default. I tried through many css ways which isn't helping at all. Demo: digloud[dot]com/user_data/techkid/phoenix_gallery/ Any help is highly appreciated. Hello, I have a menu to the right and the main content is on the left. When I resize the window the content drops below the menu. Is there anyway to stop this from happening? [Do you need to see code?] Cheers Found lots of similar threads, but not exactly the same problem... Any ideas how I can get the main content to stay centered along with the background on my site: http://gumbald.co.uk It works fine in FF, but not in IE, so I'm guessing it's a CSS issue My CSS: Code: /*Default CSS file*/ /*Formats <html> tag*/ html { height: 100%; overflow: -moz-scrollbars-vertical; background-color: #BBF; } * html #wrap { height: 100%; } /*Formats links to set colors, actions*/ #wrap a:link { color: #0054A6; text-decoration: none; } #wrap a:visited { color: #0054A6; text-decoration: none; } #wrap a:hover { color: #828282; text-decoration: none; } #wrap a:active { color: #000000; text-decoration: none; } /*Formats <body> tag*/ body { font: 65% 'trebuchet ms', arial, helvetica, sans-serif; min-height: 100%; width: 640px; margin: auto; padding: 0; background-color: #FFFFFF; border: 0px solid red; } /*Formats <h1> tag*/ h1 { font: 300% 'trebuchet ms', Arial, Helvetica, sans-serif; color: #00f; padding-top: 0px; margin: 0; } h2 { font: 130% 'trebuchet ms', Arial, Helvetica, sans-serif; padding-top: 6px; } /*Formats images, is class so can be reused on same page*/ .imgLeft { float: left; padding-right: 10px; padding-bottom: 0px; margin-top: 0px; } .imgRight { float: right; padding-left: 10px; padding-bottom: 0px; margin-top: 0px; } /*Wraps all Divs Up*/ #wrap { position: relative; min-height: 100%; width: 640px; margin: auto; background: top left repeat-y; } /*Deals with head navigation bar*/ #headwrap { } #logo { padding-left: 0px; text-indent: 10px; width: 100%; height: 42px; background: #BBF repeat center; text-align: left; } #navbar { text-indent: 10px; padding-left: 0px; width: 100%; font: 110% 'trebuchet ms', Arial, Helvetica, sans-serif; margin: auto; height: 16px; padding-top: 2px; padding-right: 0px; color: #000; text-align: left; background: #DCDCDC repeat-x; border-bottom: 1px solid #ccc; } #navbar li { display: inline; padding-right: 10px; margin: 0; } #navbar ul { padding: 0; margin: 0; } /*Deals with side navigation bar*/ #sidenavbar { float: left; width: 100px; margin-top: 0px; text-align: center; background: #DCDCDC; } /*Deals with main page content*/ #mainwrap { padding-bottom: 0px; } #mainwrap:after { display: block; clear: both; } #content { position: relative; margin-left: 6px; margin-right: 6px; padding: 0 10px; text-align: justify; } /*Deals with the footer*/ #footwrap { clear: both; height: 68px; } #footer { position: absolute; bottom: 0; height: 40px; background: #0054A6 repeat center; width: 100%; color: #FFF; text-align: center; margin: 0 auto; } #footnavbar { position: absolute; bottom: 40px; font: .95em 'trebuchet ms', Arial, Helvetica, sans-serif; width: 100%; height: 28px; padding-top: 8px; color: #000; text-align: center; background: #DCDCDC repeat-x; border-top: 1px solid #ccc; } #footnavbar li { display: inline; padding-right: 10px; margin: 0; } #footnavbar ul { padding: 0; margin: 0; } Hello, so basically I've got these side bar graphic things I want to put on the edges of my main content table to make it look nice. The problem is I can't seem to figure out how to make them resize their height automatically depending on the length of the main content table, which is slightly different on every page. Since URLs are blocked I guess I have no choice but to just include the code here, ugh. Code: ... <div id="page-container"> <div id="headerer"> </div> <div id="header"> </div> <div id="navpanel"> <img src="images/interface/gorglogowidth.jpg" width="270" height="269" border="0" /><br /> <div id="tvbg"> <div id="main-nav"> <dt id="news"><a href="index.php">news</a></dt> <dt id="episodes"><a href="episodes.html">episodes</a></dt> <dt id="universialinfo"><a href="universialinfo.html">universialinfo</a></dt> <dt id="music"><a href="music.html">music</a></dt> <dt id="contact"><a href="contact.html">contact</a></dt> </div></div></div> <div id="sidebar-b"> <img src="images/interface/panelright.jpg" width="17" border="0" /> <img src="images/interface/bottomrightcorner.jpg" /> </div> <div id="sidebar-a"> <img src="images/interface/panelleft.jpg" /> <img src="images/interface/bottomleftcorner.jpg" width="28"/> </div> <div id="content"> <span class="titletext">Episode 1: The Greatest Planet in Existence</span><br /> <a href="episodes/episode1high.html" target="_blank">High Quality (595MB)</a> <br /> <a href="episodes/episode1low.html" target="_blank">Low Quality (85MB)</a> <br /><br /> <span class="titletext">Episode 2: Savory Dark Truffle</span><br /> <a href="episodes/episode2high.html" target="_blank">High Quality (597MB)</a> <br /> <a href="episodes/episode2medium.html" target="_blank">Medium Quality (264MB)</a> <br /> <br /> <span class="titletext">Episode 3: Spoon the Pretty Bad</span><br /> <a href="episodes/episode3medium.html" target="_blank">Medium Quality (146MB)</a> <br /> <a href="episodes/episode3flashhigh.html" target="_blank">High Quality FLASH FORMAT(Recomended)</a> </div> <div id="panelbottom"> <img src="images/interface/bottommiddle.jpg" width="300" height="28" /> </div> Anyway, the two images, "panel left", and "panel right" (contained in the DIVs "sidebar-a" and "sidebar-b", respectively) go wayyy down, as their native resolution is very large and I was initially hoping to simply be able to scale them down to to match the height of the main content page The CSS file is as follows: Code: ... #page-container { width: 800px; margin: auto; text-align: left; } /* Main Navigation */ #tvbg { background:url(../images/interface/navtvlonger.jpg) } #main-nav { padding-top: 50px; margin-left: 32px; height: 356px; width: 150px; } #header { height: 188px; background: #696969 url(../images/interface/episodesheader.jpg); width: 530px; float: right; } #sidebar-a { float: left; width: 28px; } #sidebar-b { float: right; margin-left: 155px; width: 17px; } #navpanel { float: left; } #content { margin-right: 17px; margin-left: 268px; line-height: 18px; background: #696969; } #content .padding { padding: 25px; } Thanks! Page looks fine on my screen but when i resize window-divs overlap or in some cases just text runs on top of other divs messed up. Do I need to set all my width-height values and margins to auto? Margins in my wrap are auto. What are common causes of this? heres my css-its kinda a potpourri Code: #wrap {width:70%; min-width:700px; margin-left: auto; margin-right: auto; } #headertop {background:url(gradient.png); height:40px; } #header {background:url(black.png); height:70px; } .title {float:left; margin:5px; } #menu {float:right; margin-top:30px; margin-right:20px;} .link {float:left; margin-top:8px; margin-left:5px; background:url(gradient.png); border-right:1px solid black; height:auto; width:auto; padding:5px; text-align:center; font-family:Lucida Grande; padding-right:3px; margin-bottom:0px; border-top:1px solid grey; } #floatright {float:right; width:400px; margin:0px; padding-left:10px; border-left:2px double grey; height:350px; background:#000000; } .nav {float:left; height:400px; padding-right:10px; padding-top:50px; } .txt {padding-left:10px;} #bottom{background:#000000; height:10px; margin-top:0px; border:2px solid black;} #content { border:1px solid grey; background:#fffbe9; } .floatl{float:left;} #testarea { padding-top:25px; padding:10px; min-height:330px; background:#ffffff; border-left:1px solid grey; } #testareaalt { width:auto; padding-top:25px; padding:10px; min-height:330px; height:auto; background:#000000; border-left:1px solid grey; } .area {background:url(background.png); height:30px; } .button {width:100px; height:25px; border:1px solid black; background:grey; padding:8px; display:block; } .top {background:000000; height:15px; } h3 {font-family:Sans-serif; background:url(gradient.png); padding:5px; } h4 {font-family:Sans-serif; background:url(black.png); padding:5px; margin:0px; color:#ffffff; } h4.g {font-family:Sans-serif; background:url(black.png); padding:5px; margin:0px; color:#00af33; } p {font-family:verdana; line-height:15px; font-size:13px; padding-left:10px; padding-right:10px; color:7d7d7d;} ul {font-family:verdana; line-height:15px; font-size:13px; padding-left:40px; padding-right:10px; color:7d7d7d;} table {border-collapse:collapse; padding:5px; font-family:verdana; line-height:15px; font-size:13px; padding-left:10px; padding-right:10px; color:7d7d7d; } table.social {border-collapse:collapse; padding:10px; margin:5px; background:url(gradient.png); } } td.alt {background:grey; } #textbox { border:1px solid grey; background:url(black.png);} #menutrial {float:right; margin-right:0px;} .left {float:left; margin:10px; clear:left;} .container{margin:8px;} a:link, a:visited { color: #cc0033; padding:5px; text-decoration: none; font-family:Sans-serif; } a:hover, a:active { /*background-color: #C74350;*/ color: #ffffff; text-decoration: none; text-shadow: 1px 1px 1px #33ff00; font-family:Sans-serif; } #textboxa{ border:1px solid grey; background:#000000;} img.alt {margin-left:90px; margin-right:auto; width:70%; border:0px; } #right{float:right;} |