|
CSS - Picture Width Problem ..annoying :(
Dear All,
On top of my page I like to have a picture which is stretched from left to right with an gap (left/right) of 11px. That works for IE & Opera. BUT in Netscape & Firefox it doesn't stop 11px on the right site. ?????? Does anybody have an idea .. damn think is quite important for my design. The call in (XHTML validated) page is. <div id="banner"> <img class="ocean" src="/_img/headers/texture.gif" alt="" /> </div><!-- end banner --> the CSS: .ocean { position:absolute; top:12px; width: 100%; left:11px; right:11px; height: 110px; border: 0; } banner #banner { background:#fff; background-color: #7adaff; height:110px; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid white; voice-family: "\"}\""; voice-family: inherit; height:110px; } html>body #banner { height:110px; } body { margin:10px 10px 10px 10px; padding: 0; font: 'verdana', 'geneva', 'arial', 'sans-serif'; color : #6388ff; background-color: tomato; border: 1px solid white; } Appreciate any ideas Jack Similar TutorialsOk, Now when I am trying to nest divs for the header bar, left column. Nothing gets put into the header div and I've tried tons of stuff to get it to work. Heres a sample: Code:
<HTML>
<HEAD>
<title>
Page Title
</title>
<style>
.defaultText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.titleText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000000;
}
.addModuleText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
.adminHeaderText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
}
.button {
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 2px;
border: 1px solid #0099FF;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
background-color: #1C4F9B;
}
.smallText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
}
.moduleTitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
}
.TabBg {
background-color: #1C4F9B;
border-color: black;
}
.NormalTabsBg {
background-color: #559cec;
border-color: black;
}
.selectedTab {
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
color:white;
font-weight: bold
}
.normalTabs {
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
color:gainsboro;
text-decoration:none;
font-weight: bold
}
.textBox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 100px;
border: 1px #000000 solid;
background-color: #FFFFFF
}
.largeTextBox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: 1px #000000 solid;
background-color: #FFFFFF
}
#addNewModule {
padding-top: 10px;
padding-left: 5px;
padding-bottom: 10px;
}
#addNewModule a
{
border: 1px solid #000;
background-color: #1C4F9B;
padding: 5px;
}
#bodyWrapper {
border: 1px solid purple;
background-color: #559CEC;
width: 100%;
}
#header {
background: #EEE;
border: 1px solid red;
}
#header #headerLeftColumn {
float: left;
width: 500px;
}
#header h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: left;
vertical-align: top;
color: #000;
padding-left: 15px;
padding-top: 20px;
width: 100%;
}
#header #loginControl {
float: right;
width: 250px;
border: 1px solid #000;
}
#container {
float: left;
width: 100%;
margin-right: -260px;
border: 1px solid red;
}
#content {
border: 1px solid yellow;
margin-right: 260px;
}
#left
{
float: left;
width: 250px;
border: 1px solid #FFF;
}
#middle {
margin-left: 260px;
border: 1px solid orange;
}
#sidebar {
float: right;
width: 250px;
border: 1px solid #000;
}
#footer {
background: #999;
border: 1px solid #cecea5;
clear: both;
}
#module {
position:relative;
width: 100%;
padding: 2px;
background: #FFF;
border: 1px solid #000000;
font-size: 10px;
}
#title {
background-color: #C2DBF5;
padding: 3px;
border: 1px solid #144678;
text-align: left;
color: Black;
font-weight: bold;
font-size: 14px;
}
#moduleItem {
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
#moduleItem h1 {
font-weight: bold;
font-size: 12px;
margin-bottom: 0px;
}
#moduleItem p {
margin-top: 0px;
margin-bottom: 10px;
}
#module #footer {
background-color: #C2DBF5;
border: 1px solid #144678;
padding: 4px;
text-align: left;
color: black;
font-weight: normal;
font-size: 10px;
}
body {
color: #000000;
background-color: #E8E8E8;
font-family: Verdana, sans-serif;
font-size: smaller;
margin: 10px 10px 0px 10px;
}
</style>
</HEAD>
<BODY>
<form runat="server" ID="frm">
<DIV id="header">
<DIV id="headerLeftColumn">
<h1>Site Title
</h1>
<p>
Paragraph left text
</p>
</DIV>
<DIV id="loginControl">
Login buttons
</DIV>
</div>
<DIV id="bodyWrapper">
<DIV id="container">
<DIV id="content">
<DIV id="left">Left</DIV>
<DIV id="middle">Center</DIV>
</DIV>
</DIV>
<DIV id="sidebar">Sidebar text</DIV>
</div>
</form>
</BODY>
</HTML>
Hi, I've gone as long as I can without asking for help, but this has got me stumped. I have a site I'm trying to make at http://joe.terrarum.net/test.html If you resize the window so its less than 600px or so, the drop shadow starts getting clipped. I know why this is happening (the height is set to 100%, so it's just following the rule of being 100% the size of the window when the window is smaller than the inside block) but I would like it to be the same size as the block inside even when the window is smaller. Make sense? The block is actually the block showing the background. It's 532px in length from the header. The gray box is just a simple context box (that should also push the height of the background box if it gets too big). Anyone have any ideas? Thanks! -Joe Hi guys, I'm new to this forum but the advice looks great - I hope someone can help me out! I'm having a really weird problem with my CSS in Windows Firefox. Everything displays fine in Mac.Opera, Mac.Firefox, Mac.Safari, Windows.IE7 but doesn't display correctly in Windows.Firefox! For some reason it's creating a gap between the menu tabs and the line below, it's coming from the padding-bottom of #ddcolortabs a .link which is 3px. However, I need this to create the right spacing between the bottom of the words in the menu and the top of the line. I'm not allowed to put a URL in this post, which is very annoying! If you think you could help I'll send you the link in a message I guess?! Let me know if there's another way! If anyone has any ideas for a solution I would be very grateful! Cheers, Andrew me again, i fixed my last problem just to run into another i messed a little with my code, so that i have 2 elements on the page 'fixed' (in FF and IE) and the main body part is scrollable. the complete site is here i cannot seem to set a minimum width for the browser window. try to resize the window and you will see, that the main bodywindow will maintain at least 500px width in Firefox (not in IE < thats prob no.1) -- but also does the main body window slip underneath the navigation to the left. i tried to change the z-value, but even if i give them both the same z-value it slips underneath it. it would be great, if someone could help me with this problem, i know i have to correct it somewhere in the css, but cannot find it EDIT solved problem.... okay, so i just positioned (absolute) the bodybox element a fix amount away from the left border of the screen -- before it was 10% away from the right border of the screen .... it doesn't seem that liquid anymore, but i can live with it .... now i just need to convince IE to maintain a minimum width .... which topic has been discussed before EDIT2 i added the line Code: width: expression(document.body.clientWidth < 781 ? "780px" : "100%" ); to my fixed4ie.css file .... this messes on my old IBM ('95) around a little and i am not sure if you can see the graphic delay on newer computers. this is the only thing that worked for me so far .... interesting enough there are no more scrollbars, once i go under that certain width .... if - by now - someone has an idea how to fix this, i would appreciate other solutions to this problem Hi all - ive discovered a css problem when using 100% width areas on a website. take the following site for example.. offmymakeupbox.com if you open a browser that is not maximized there is a scrollbar that allows you to scroll to the right, but if you scroll to the right you can see that the footer has been cut off. ie. it is the width of the resized browser and not 100% width of the actual template. is there a way to fix this? thanks hi, wonder if someone can help me. I'm trying to create a css layout for a site, which has a header then two vertical columns (pretty standard). i want the first column to be a set size and the second content column to be variable to use up the rest of the page space. i can get the first column and header to work fine but not the second content column. any help would be good. here my code: Code: #header {
margin: 20px 20px 0px 20px;
padding: 10px;
border: 1px solid #666;
background: #ccc;
height: 100px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 70px;
}
html>body #header {
height: 70px; /* ie5win fudge ends */
}
#menu_v {
position: absolute;
top: 120px;
left: 0px;
margin: 20px;
padding: 10px;
border: 1px solid #666;
background: #ccc;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #menu_v {
width: 120px; /* ie5win fudge ends */
}
#content {
position: absolute;
top: 120px;
right: 0px; /* Opera5.02 will show a space at right when there is no scroll bar */
margin: 20px 20px 20px 190px;
padding: 10px;
border: 1px solid #666;
background: #ccc;
}
I'm having a problem with a width attribute in IE7. The main content div on the page http://www.mckr.ie/test.html looks fine in Opera but in IE7 it makes the page scroll horizontally. Basically I didn't put a width on the #contentdiv styled <div>, its supposed to just occupy the width of the page automatically. When I put width 100% on it it messed up in IE6. Now I'm looking at it in IE7 and its similarly messed up. Does anyone know a way of solving this? Any help would be much appreciated. Here's my HTML code: Code: <div id="bannerdiv"></div> <div id="contentdiv"> Content here</div> <div id="leftnavdiv"><div id="leftnavouterdiv"><div id="leftnavinnerdiv">Nav here</div></div> <div id="searchdiv"><div id="innersearchdiv"><p><b>Site Web en Francais</b></p> <form action="http://search.atomz.com/search/" method="get" target="main"> <b>Search the Site<br /> </b> <input name="sp-q" size="15" /> <input name="submit" type="submit" value="Go" /> <input name="sp-a" type="hidden" value="sp10023119" /> <input name="sp-f" type="hidden" value="ISO-8859-1" /> </form> </div> </div> </div> <div id="topnavdiv"> <ul> <li><a href="/" id="buttonhome"><b>Home</b></a></li> <li><a href="about.html" id="buttonabout"><b>About Us</b></a></li> <li><a href="location.html" id="buttonlocation"><b>Location</b></a></li> <li><a href="contact.html" id="buttoncontact"><b>Contact Us</b></a></li> <li><a href="news.html" id="buttonnews"><b>News</b></a></li> <li><a href="people.html" id="buttonpeople"><b>People</b></a></li> <li><a href="recruitment.html" id="buttonrecruitment"><b>Recruitment</b></a></li> </ul> </div> Here is the relevant CSS code: Code: #bannerdiv { background-image: url(images/logo_banner.gif); height: 120px; width: 100%; background-color: #3366CC; background-repeat: no-repeat; background-position: left top; display: block; top: 0px; position: absolute; z-index: 9; left: 0px; } body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; margin: 0px; padding: 0px; }
#leftnavdiv { position:absolute; left:0px; top:146px; width:237px; z-index:2; font-size: 11px; } #contentdiv { position:absolute; left:250px; top:146px; z-index:1 }
#leftnavinnerdiv { width: 210px; margin-top: 0px; margin-bottom: 0px; margin-left: 10px; padding-bottom: 30px; padding-top: 0px; }
#leftnavouterdiv {
background-color: #EEF3F9;
background-image: url(images/bg.newsbottom.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
#searchdiv {
background-color: #EEF3F9;
width: 234px;
margin-top: 15px;
margin-bottom: 15px;
}
#innersearchdiv {
margin: 0px 15px;
padding-top: 15px;
padding-bottom: 15px;
}
#topnavdiv {
position:absolute;
left:0px;
top:120px;
width:100%;
z-index:3;
background-color: #3366CC;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-color: #f8c015;
border-bottom-color: #f8c015;
border-right-color: #f8c015;
border-left-color: #f8c015;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
height: 24px;
}
How do I make "content" <div class="content"> to go all the way to the right side of the "profile"? Code:
<style type="text/css">
#container { width: 800px;
background-color:#666;
padding: 20px;
}
#profiles_container {
background-color:#33CC66;
}
#profiles_container .profile { background-color:#CCFFFF;
margin: 20px 0px 20px 0px;
padding: 10px;
}
#profiles_container .profile .foto { background-color:#CCCC33;
float: left;
width: 200px;
padding: 10px;
}
#profiles_container .profile .content { background-color:#FF0000;
float: left;
margin-left: 10px;
padding: 10px 10px 10px 10px;
}
#profiles_container .profile .content .col1 { background-color:#CCFFCC;
float: left;
}
#profiles_container .profile .content .col2 {
float: left;
}
#profiles_container .profile .btm{
background-color:#999999;
}
.clear {clear:both;}
</style>
</head><body>
<div id="container">
<div id="profiles_container">
<div class="profile">
<div class="foto"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Photo_1" border="0" align="top" />
</div><!-- END foto -->
<div class="content">
<div class="col1"><p>COLUMN_1</p></div><!-- END col1 -->
<div class="col2"><p>COLUMN_2</p></div><!-- END col2 -->
</div><!-- END content -->
<div class="clear"></div>
<div class="btm"><p>BOTTOM</p></div>
</div><!-- END profile -->
</div><!-- END profiles_container -->
</div><!-- END container -->
http://www.veracon.net/qwaffle/ If you look closely in Firefox, the content holder (left and right) is one pixel too small - it's meant to be the same size as the header. I don't see why this is happening, as it looks fine in IE. I could use some help. http://www.turboconceptsllc.com/main.php in IE 6. how do i get the top banner stretch to span across the entire width of the browser? i think its stopping at the scroll bar, from what ive read.. how is this fixed? Code:
.main_table_top_banner
{
background-image:url('');
background-repeat: no-repeat;
background-color: #3A3A3E;
width: 100%;
height: 50px;
position:absolute;
left:0px;
top:0px;
overflow: none;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:0px solid;
z-index:1;
}
When i view rockitdesign.co.uk/portfolio in IE6, one of the columns seems too wide so the right one is getting squeezed underneath. This seems to happen on many of the sites i do so must be the same thing causing it? Any ideas? Thanks. in ie the main page looks fine but the inner pages in for ex: http://www.bekirhoca.com/ogretmen/uzmanortmen.asp width sux. When i gave width value its not okay both in ie and firefox. So now I publish my site with spaces between columns in ie and messed up style in firefox. I think that'd help ,, i want a code that will keep my site remain same when the window has a small weight or height Please helppppppppp This code results in a DIV box with 1 pixle borders, with tabs at the top. Code: <html>
<head>
<title>Untitled</title>
<style type="text/css" media="screen">
/* Top Tab Menu */
#navlist
{
border-bottom: 1px solid #ccc;
margin: 0;
padding-bottom: 19px;
padding-left: 10px;
}
#navlist ul, #navlist li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
#navlist a:link, #navlist a:visited
{
background: #E8EBF0;
border: 1px solid #ccc;
color: #666;
float: left;
font-weight: normal;
line-height: 14px;
margin-right: 8px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}
#navlist a:link#current, #navlist a:visited#current
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}
#navlist a:hover
{
color: #666;
background: #fff;
}
/* Big Box Below Tabs */
#content_box {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
body {
margin: 10px;
}
</style>
<title>Test</title>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Test One</a></li>
<li><a href="#">Test two</a></li>
<li><a href="#">Test three</a></li>
<li><a href="#">Test four</a></li>
<li><a href="#">Test five</a></li>
</ul>
</div>
<div id="content_box">
<table width="100%" border="0" cellpadding="5">
<tr>
<td>
Test<br />Test<br />Test
</td>
</tr>
</table>
</div>
</body>
</html>
In it, is a table with 100% width which will hold row data from a database. It works very well if Firefox. But in IE, the right edge of the DIV box is pushed to the right by two pixles. I believe it is the table doing this. I'm not understading how to have the non fixed width DIV contain a non fixed width table. See the real thing at Siliconsatan.com/example.php See a close up image below. I have a container, header,left-side vertical navbar, content, and a footer. Everything works fine except when the content div is very wide. When this happens the header and footer are only as wide as the screen and not as wide as the content div. Here's my CSS. Code:
#container {
width:100%;
background: #fffce0 url(images/narrowtrick.gif) repeat-y;/*this colour will be left column colour */
margin:0px;
padding:0px;
text-align:left;
}
#header {
height:145px;
width:100%;
background-image: url(images/topbackground2.jpg);
text-align:center;
margin:0px;
padding:0px;}
#navbar{
float:left;
width:122px;
margin:0px;
padding:0px;}
#content {
background:#fffce0;/* background colour of right column */
margin-left:122px;/*this is the space for the left column */
padding:0px;
}
#footer {
clear: both;
border-top:1px solid red;
border-bottom:1px solid red;
background-image: url(images/gradientsmaller2.gif);
font: 10pt;
background-color: #ccffcc;
width: 100%;
text-align: right;
margin:0px;
padding:0px;
}
I can't figure this one out! Code: <div id=container> <div id=header> </div> <div id=navbar> </div> <div id=content> </div> <div id=footer> </div> </div> the content div is dynamic so it could be very wide. Hi All, I have CSS-sheet= .thumbs { border: 2px solid #524b2f; position: static; height: 80px; width: auto; } body { background-color: #f5f0ec; font-family: Verdana, Arial, Helvetica, sans-serif; scrollbar-face-color : #f5f0ec; scrollbar-highlight-color : #aca899; scrollbar-3dlight-color : #f5f0ec; scrollbar-shadow-color : #aca899; scrollbar-darkshadow-color :#f5f0ec; scrollbar-track-color : #f5f0ec; scrollbar-arrow-color : #524b2f; } The thumbs part resizes some pictures to a fixed height of =80px and calculates the width so everyting is resized correctly. But IE6 gives problems with the width=auto , some times it's sets the widt correctly other times it doesn't. In other brouwsers its fine. Any suggestions on fixing this in IE6? here's the page link : http://www.sleuyter.be/04/lay04-1.htm thx, ROY As simple as the problem sounds, Im completely puzzled by what could be going wrong. The problem is if I set the width of my div too 100%, it wont show up in Firefox. It works fine if I define it in pixels, but I want it to just stretch. Using a % works fine in IE. Here is the code: Code:
#left {
width:100%;
height:598px;
padding:0;
background: #EEF;
display: table-cell;
background: url("bg.gif") top left repeat-x;
}
Anyone have any ideas? New guy on the scene - I need a little help. Seems basic, but I can't figure it out. html and body tags set to a width of 100%. I have a div that I want to be 100% with a border. If I set it to a width of 100% and a border of "1px solid #000" the div actually expands 2 pixels beyond the right edge of the page in FF. Haven't tried it in IE yet. In any case, anyone know how to solve this? If not, any creative work-arounds? Thanks. ok here i am again with a width problem ,, http://www.bekirhoca.com/index.asp < here's the problematic page. the index looks fine but inner pages like http://www.bekirhoca.com/ogretmen/uzmanortmen.asp (this is one of the pages cleared from tables) , content width is smaller and not like as i want it to be or you want it to be ,, in my css when i gave width it looks fine on my computer but on another computers not because i adjust the width for my computer. when i give width, if you have a tight browser the content overflows and puts itself to the downwards of the page. And also when theres no width, the site sux in ff. where the the problem starts in my css #contentColumn { float: left; background:white; //if width: a number; } http://www.ourdayton.com/index.html?do=regUser reffering to the dark blue box with the form contained in it: With the width set to default, or width:auto, it stretches to fit the parent. If I specify a width, the box will not stretch to hold the content within it. I've also played with min-width/max-width to no avail. I'm sure im just missing/forgetting a property. Here is the code for the box: Code:
#generalBox{
width: auto;
margin-left: auto;
margin-right: auto;
padding: 8px 8px 8px 8px;
border: 1px solid #525c69;
background-color: #212a34;
text-align: center;
}
Hey guys, I'm new to the forums and would appreciate any help... I've never used fieldsets before, until now, and check out: http://www.koofers.com/contact.php A horizontal bar shows up in IE... and the globe in the top right of the screen goes off the monitor! And in FireFox, if I add bullet points to the content, the text actually goes outside of the fieldset. I know now the more I read that fieldsets are pretty much just for forms and such, but I really like the cool effect they give! And yes, I know... I shouldn't be using tables for my design, I should be doing crazy sweet things in CSS, but I'm still learning and don't have the time to totally re-design it in CSS (even if I could get it working!) Any help would be appreciated. |
|||||||