|
CSS - Image Vertical Stretch Doesn't Work
I got this WP style, and I edited it quite a bit.
Code: #menu {
clear: right;
float: left;
position: relative;
padding:0 10px 0 10px;
margin:0 0 0 34px;
width: 160px;
/* border-left: 1px solid #bbaf95;
border-right: 1px solid #bbaf95; */
background: #fff rl(wp-images/bg.png) repeat-y 100% 0;
}
The problem being is that the image border does not reach the where the css borders were, and it does not stretch 100% to the bottom either. Even more, it takes three seconds to load from where it use to take less than one. Check it out: http://randomized.us Thanks in advance. Similar TutorialsI'm trying to create a little background image for each image on this page. A kind of crappy looking polaroid type background image. It works fine in Firefox, but not in IE. Any ideas? http://www.rhizaowns.com/holly/index.php Hi! I have a css file (validated) which contains: Code: TD.p1{ text-align: left; background-image: url('http://local/adres/img/szablon/1/g_1.gif'); }
this works properly with Opera 7.54, Mozilla, but it doesn't work with MSIE! Only in MSIE I can't see the background image. Does anybody knows what may be wrong? MSIE version: 6.0.2600.0000 I'm creating an email template for all mail that I'll send to my users. I'm trying to make it work for as many mail clients as possible, so I'm only using inline css. Even with that, it appears that gmail doesn't support the background-image property. I have a table defined as Code:
<table style="background:#666666; background-image:url(http://{$_SERVER['SERVER_NAME']}/images/bg_grad.gif); background-repeat:repeat-x; width:100%; height:100%; margin:0px; " cellpadding="0" cellspacing="0">
...
This works fine for yahoo mail. With gmail, it will render "background", but as soon as I try and add an image, it ignores all of the styling. Has anybody run into this problem? Any suggestions on a solution would be greatly appreciated. I hardly ever use css for thimgs like backgrounds, but I have a freelance client that has alot of interesting ideas about how a good website should look so I'm trying to make him happy. When I have: body { background: url('resources/assets/background.jpg') no-repeat bottom left; } in the extranal css it doesn't work. If I put it into the page it works fine. None of the online css resources I've looked at mention why this should be. I've even tried using the complete http://www.server.com/blah/blah/ address and I get the same results. Does this just not work from an external css, or am I missing something? Thanks y'all. i want to make a word Stretch across a givin width... when ever i set it to expanded, wider, or any of the others... nothing happens to the text.. does anyonw know how this works? Long time reader, first time poster. I have an issue with a css vertical menu I've made but first things first. My target browser is IE7, this is a corporate intranet so I have some control over this. However, we do run alot of pcs with Firefox but, of course, the problem doesn't exist with this browser. Here's the issue: The div#leftbox contains the menu but when the list elements extend into the center div (div#middlebox) you can see the anchors and finger them but if you try to move to the next list item the submenu disapears? It's like it recognizes the display: block on the list element but not on the anchor? Another weird thing is that if I extend the div#leftbox width to accommodate the size of the menu and the submenu it works fine but only if i have a background-color applied to the #leftbox. If I leave it transparent it behaves as before. Here's the markup and css... index.asp Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" xml:lang="en" lang="en">
<head>
<title>Intranet</title>
<link href="/styles/<%Response.Write(Session("session_theme"))%>/screen.css" type="text/css" media="screen" rel="stylesheet" />
<link href="/styles/print.css" type="text/css" media="print" rel="stylesheet" />
<style type="text/css">@import url(/styles/<%Response.Write(Session("session_theme"))%>/calendar-win2k-1.css);</style>
<script type="text/javascript" src="/calendar/calendar.js"></script>
<script type="text/javascript" src="/calendar/lang/calendar-en.js"></script>
<script type="text/javascript" src="/calendar/calendar-setup.js"></script>
<link rel="SHORTCUT ICON" href="/favicon.ico" />
</head>
<body>
<div id="topbar">
<!--#include virtual="/inc/toolbar.asp" -->
</div>
<div id="leftbox">
<!--#include virtual="/inc/menu.asp" -->
</div>
<div id="rightbox">
<!--#include virtual="/inc/rightbox.asp" -->
</div>
<div id="middlebox">
<h1> Welcome to the IntraNET</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac pede. Cras tristique, ipsum in scelerisque lobortis, diam nisl lobortis ipsum, eu ultricies orci justo a purus. Integer pellentesque, dui ut ullamcorper pellentesque, diam sapien venenatis augue, id rutrum lorem nibh non ligula. Nullam mattis. Donec eget pede. Donec blandit rhoncus erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lobortis cursus augue. Maecenas elit. Nullam viverra justo sed mi. Cras porta tellus non justo. Fusce adipiscing molestie elit. Nullam vulputate felis sed mi. Curabitur velit sem, bibendum ut, tempus sed, sodales vitae, libero. Aliquam nisl. Pellentesque tellus dolor, elementum sed, semper suscipit, pretium vitae, mauris. Vivamus sem.
</p>
</div>
</body>
</html>
Here's the menu.asp include... Code: <ul id="nav"> <li><a href='/departments/reports/index.asp'>Reports</a> <ul> <li><a href=''>EOD<span>End of Day Reports</span></a></li> <li><a href=''>EOM<span>End of Month</span></a></li> <li><a href=''>On Demand Reports<span>Reports sent to the web queue</span></a></li> <li><a href=''>Office Reports<span>A collection of front office and customer service reports</span></a></li> <li><a href=''>Warehouse Reports<span>A collection reports for warehouse operations</span></a></li> <li><a href=''>Merchandising Reports<span>EIS and vendor reports for merchandising</span></a></li> <li><a href=''>Accounting Reports<span>A collection of account reports</span></a></li> </ul> </li> <li> <a href='/index.asp'>Home</a> </li> </ul> and here's the css Code:
body {background: #fff; font-size: 62.5%; color: #033; font-family: Verdana, Arial, san-serif;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}
p { font-size: 1.2em; line-height: 1.5em; }
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #099;
z-index: 1;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #006;
background: #ccc;
padding: 5px;
border: 1px solid #006;
border-bottom: 0;
}
ul li a:hover { color: #600; background: #fff; display: block;} /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
/* Begin Tool Tip Span */
span {
display: none;
}
a:hover span {
z-index: 1;
position: absolute;
top: 1px;
left: 200px;
width: 220px;
display: block;
background: #fff;
border: 2px solid #006;
padding: 10px 10px 10px 5px;
}
/* End Tool Tip Span */
/*******************************************************************************
Positioning rules
*******************************************************************************/
div#leftbox {
position: absolute;
left: 10px;
width: 150px;
color: #333;
padding-top: 10px;
background-color: #fff;
z-index: 1;}
#middlebox {
margin: 0 34% 0 170px;
border-left: 3px solid #ccc;
border-right: 3px solid #ccc;
border-bottom: 3px solid #ccc;
padding: 10px;
background-color: #efefef;
}
div#rightbox {
position: absolute;
right: 25px;
width: 30%;
color: #666;
padding-top: 10px;
background-color: transparent;}
div#topbar {
margin: 0;
padding: 0;
width: 100%;
background-image: url('/images/default-topbar-bg.jpg');
background-repeat: repeat-x;
}
div#search {
color: #ffc;
font-size: 1.1em;
letter-spacing: .75em;
margin: 0;
padding: 0;
position: absolute;
top: 16px;
left: 20px;
word-spacing: 1em;
}
Your help and advice is most welcome and appreciated. Mark Hello everybody! I have been having a big problem with my webpage for a long time now and hope I can find an answer to my problem with your help. I want a div that contains the content of my pages (which varies in length depending on the individual page) to stretch the length of my page, but it only stretches the length of the window. Here's the HTML and CSS: HTML (I only included the very basic structure): <html> <body> <div class="container"> <div id="content"> <div id="..."></div> <div id="..."></div> <div id="..."></div> <div id="..."></div> </div> </div> </body> </html>` CSS: html, body { height: 100%; font-family: Arial; font-size: 10px; color: #000000; background: #FFF url(../../images/body.png) no-repeat center 40px; margin: 0; position: relative;} .container { height: 100%; width: 960px; margin-right: auto; margin-left: auto; position: relative;} #content { width: 939px; min-height: 100%; position: relative; top: 210px; left: 6px; box-shadow: 0px 0px 8px #666; -moz-box-shadow: 0px 0px 8px #666; -webkit-box-shadow: 0px 0px 8px #666; background-color: #FFF;} I tried to set the content div to overflow: auto, but that includes a scroll bar for the content div that I do not want. It does, however, create the desired effect of the shadow and background of the #content div all the way to the end of the page. Am I missing anything? I thought min-height would work, but it doesn't! It only stretches the content div to page height and everything else is overflow, but without the content div's background color and shadow. Does anybody maybe see where the problem lies? Thank you so much in advance for your help. Ok, I have a gradient and i'm using it as the background for a <div> I want the whole background to show. So it's always dark at the bottom and light at the top. I have my image gradient.jpg and I want it to stretch or shrink vertially but repeat horizontally. Heres what I have: Code:
<style type="text/css">
<!--
div {
width: 50%;
height: 50%;
background-image: url(background.jpg);
}
-->
</style>
Like that it will only display half of the gradient if the gradient is longer than 50% of the page. I want it to stretch or shrink the image so that the whole gradient is displayed. I tried using the background-size: 100% attribute but it diddnt do anything :-\ Thanks for any help. Hi, Just wondering if anyone can tell me how i would go about stretching a background image for my website so as it stretches with different page sizes and resolutions an all the rest I am working on this template: http://www.oswd.org/design/preview/id/2790 & I need both the white & green content boxes to stretch as I add content. I don't know if this is even possible but would like to know if there is an easier way than having to create another (more stretched) image. Also as the content will be changing frequently I don't want to have to change from one image to another if I can help it. Appreciate any help you can give. Here's my CSS Code:
#header {
position: fixed;
left: 0;
width: 100%;
height: 125px;
top: 0;
background-color: #ccffcc;
background-image: url(images/topbackground2.jpg);
}
Here's my HTML Code: <div id="header" > <img src="images/spacefiller.jpg" align="left"> <a href="mainFrame.html" target="mainFrame"><img src="images/trial3.jpg" border="0" id="courseAssistant" align="left"/></a > <img src="images/blend.gif" width="100%" height="20px" style="position: absolute;left: 122px;top:125px; "> </div> The problem is that I want the <img src=blend> to stretch the width of the div. The image is only 1px wide so I need it to stretch to fill up the header. The code I have works perfect for Mozilla but it won't work with IE. In IE the img stretches 122px farther than the div and causes there to be horizontal scroll bar at the bottom. I can't seem to figure this one out. Thanks in advance for the help and suggestions. Hi there, I'm making a CakePHP application to display my friend's artwork. I'm having trouble with the style sheet though. The header and footer are made of two fading images. I've used the background image property to stretch these images to fill the divs and have made the divs stretch to fill the width of the page. At this point it's probably easiest to see what I mean by taking a look for yourself- http://www.seb.webege.com/paintings/gallery If you view this page in Chrome or Firefox then you'll see the desired effect with the image filling the width of the page. The problem comes with Safari and IE. In these browsers the image does not stretch to fill the screen. I am not an expert at HTML/CSS and can't for the life of me work out what has gone wrong or what I can do to fix it, after numerous google searches I'm still none the wiser and I'm just not seeing the problem. Can anyone advise me how to get the images to stretch to the browser width in Safari and Explorer? Any help would really be appreciated. Many thanks, Nick I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple: PHP Code: h3 { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } p { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } a { text-decoration: none; } a:hover { color:#636500; } a:visited { color:#cecf9c; } a:link { color:#cecf9c; } searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore. I think it may be affected by the a:visited style, but how do I make a:hover work all the time? Thanks for helping. I'm trying to go through examples out there and get a handle on stretching background images with an opacity text box overlaying the image. I have it working in IE7, IE6, and Firefox 2.0.0.16 with one weird little thing. In Firefox only, if I have the page designated as the home page or I hit refresh, the background image doesn't appear - just a completely white page. If I have it as a link or highlight the url itself and hit enter, the background appears. Any ideas? It's pretty hideous - it's a test, but here's the url: http://www.mahec.net/default3.aspx Here's the code: Code: <%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; color: #fff;}
a { color: #fff; }
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {
position:relative;
width:90%;
padding:25px 25px 25px 25px;
z-index:1;
background-color:#ffffff;
color:#000000;
opacity:0.6;
filter: alpha(opacity=60);
}
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="http://flounder2.mahec.net/images/rhodo.jpg" alt="my 2 cats" id="bg" />
<div id="content">
<h1>Faking a Stretched Background Image</h1>
<h2>Across the Whole Page</h2>
<p><a href="/od/css3/f/blfaqbgsize.htm">Learn how to stretch a background image.</a></p>
<p>paragraph text</p>
</div>
</form>
</body>
</html>
i was looking for way how to display vertical text with css and found a solution: #vertical { writing-mode: tb-rl; filter: flipH flipV; } <div id="vertical">display vertical text</div> however, this works fine with IE 6.0, but is comletely ignored with Mozilla 1.4! is it that Mozilla just doesn't support this or is there a way how to work it around(write it in a way both IE and Mozilla could understand it)? i'll aprecciate your help very much.. (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? Hi All, We develoepd an Application for a client. This application uses CSS for all text including drop-down menu text and input box text. My client is using XP as their OS and he tells me (sent a screen capture as well) he CANNOT read the drop-down boxes. Text is too small. On our machines (Win 98) there are no problems. Have tested on about 15 different client computers with no problems. Browser is not an issue as its the same for him on both Netscape and IE. Does ANYONE have a clue how to fix this? Doesn't seem logical to me - one OS should be the same as the other. However, we're talkin about MS products and who knows with them. Need urgent help on this one.. please.. anyone with ideas help me! thanks all. Peace. Aaron On my re-design of www.samuraiblog.com , I have a DIV that has quite a bit of text in it. I have it set to 100%, but it only goes about 1/4 of the way. You can see what I mean here, on a test server, http://samuraiblog.dreamhost.com/index.php Thanks, -Sam This is my CSS File: PHP Code: .linkbody { padding: 15px 15px 6px; color: white; font-family: Verdana; font-size: 10pt; width: 160px; background-color: #006EA1; } and this my html file: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
<title> Schmid </title>
<link type="text/css" rel="stylesheet" href="css2.css">
</head>
<body>
<center>
<table class="linkbody" width="800">
<tr>
<td>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</td>
</tr>
</table>
</center>
</body>
</HTML>
In Firefox the padding works fine, but in the IE6 it doesn't work at all makes me angry thx for any help |
|||||||