|
CSS - Div Container Border Problem
i have created a profile at www.studavis.co.uk/audio - all done in css. The site renders fine in Internet Explorer (as expected) but when shown in Firefox there are problems. Firstly, I can't see why the border only goes along the top, despite specifying that it should go all the way round. I have a suspicion it has something to do with the floats on the two columns, though I am not certain on that. Also, the #conatainer id, despite having a background colour specified, it doesn't show through. Secondly, i need to fill the bottom of teh right column, so that it fills the same height as the larger left column.
I have been racking my brain on these for the past few hours so any help is GREATLY appreciated. thanks stuart Similar TutorialsI tried to play around with my code to see if I could get a image of a bar and its two ends on the top border of the div containers and have text on it. But this is what I have so far and its not working! Code: .preview {border 1xp solid black;
background-color: white;
}
.preview .innerdiv{
background: transparent url(css/bar.png);
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
}
I have a web page that I am going to give to a someone that will give me something if I get it done in a week so I want to get this hard to figure out proplem out of my way so I can get more done faster. Your help will be most thankful! I want something like this to help get a better understanding what I want. http://www.quake3world.com/forum/portal.php i've got two spans nested within a containing div. currently they have no border. I want the two spans contained within the span to have a border on hover, but not the container itself. my code's like this: <span class="button" onmouseover="this.style.class = '1px solid black'" > <span class="subbut"><u>T</u>ools</span> <span class="subbut"><img src="images/menu_down.gif" width="9" height="9"></span> </span> which will obviously not work. I thought a cool approch would be to sub the class on the entire outer span. Say it has the class button - if i can switch it for buttonover and then button over has something like this: .buttonover SPAN { then the border stuff } that might work - but i don't think you can totally switch the class of an object. Please help - SP!KE Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
As you can see on http://www.angelicscans.com/weblog/index.php I am trying to make my own blog. I would like to have all the contents of my page/blog inside a frame (like a table, but I'd like to make it in css). This is my css code for the frame: #frame { margin: 14px auto 0px auto; padding: 0; text-align:left; border: 1px solid black; width: 730px; } The probem is (and I don't know why) only the title and subtitle are inside that frame. This is the html: <body> <div id="frame"> here comes the content of the page <!-- end of 'frame' --></div> </body> </html> Anyone knows why only the title is inside tha frame and not the whole page? Thanks. Hi, I have the following css: Code: #container { background: url(../images/page.gif) repeat-y center;
position:relative;
width:100%;
height:100%;
}
#banner {background:url(../images/banner.gif) no-repeat center;
height:108px;
width:100%;
position:relative;
}
#menu {background:url(../images/menu.gif) no-repeat top center;
height:124px;
width:100%;
position:relative;
}
#content {
margin-left: 240px;
font-family:'Helv', Arial, Helvetica, Geneva, sans-serif;
font-size:14px;
letter-spacing:1px;
color:#000;
text-align:justify;
width:580px;
position:relative;
}
#footer {background:url(../images/pgfooter.gif) bottom center no-repeat;
height:46px;
width:100%;
position:relative;
}
all background are fixed width for 1024x768 and i have the following html <div id="container"> <div id="banner"></div> <div id="menu"></div> <div id="content"> All text goes here </div> <div id="footer"></div> </div> now the problem is that if i set the #container width to let say 1000px; it works fine (only resizeing the browser instantly ihave the horizontal scroller). So i want to set thethe container width to 100%. As soon as i set that and resize the browser the page flows well But the text in the #content div remains static and doesn't move along with the bkgrounds, thus flowing "out" of the text area. the links is here Code: http://ocdmonline.org/michael/ username: ocdmonline pass:4yGx3fM Any ideas? 10x Hi I am quite familiar with CSS but am stumped on how I could do the following. Basically I need a template with a header, body and footer, I know, sounds simple right, but I need to have the middle body section of the page stretching to the height of the browser, so that the space in between the header and footer is filled in with the middle container. The middle container that stretches to the required height needs to have a background image that cannot be covered over by the header or the footer. This is the problem, because if the middle container is set to 100% height, then a scroll bar is always present because of the header and footers height. I have been able to create what I am trying to do with a table, but obviously I want to avoid using a table for a layout. Is there any way to recreate this but via CSS? Take a look at the table layout and change the size of your browser to see the effect I am aiming for, but in CSS http://labwaves.com/temp/index3.php This is an attempt in CSS, but It requires me to set the headers and footers background image to the same as the bodys background image, with I can't have . http://labwaves.com/temp/index2.php Congratulations on making it to the end of this long, but hopefully un-confusing post Thanks and any reply's are really, really appreciated as I am so stuck on this one! I am working on a project based around the Thesis Wordpress theme where I have had to add a sidebar on the lefthand side of a site, which didn't seem like a real big deal. My approach to this task was to essentially create a new series of div layout tags to encompass Thesis' core "container" id through OpenHook... here's what I did: With the 'Before HTML' hook, I added: Code: <div id="headerrunner">
<div id="footerrunner">
<div id="externalwrap">
<div id="gutter">
<div id="gutter-upper">
<? include get_bloginfo('template_url').'/custom/gutter.php'; ?>
</div>
</div>
And with After HTML I added: Code: <div class="clear"><!-- --> <!-- end id="externalwrap" --> </div> <!-- end id="footerrunner" --> </div> <!-- end id="headerrunner" --> </div> Pertinent CSS is he Code: .custom #externalwrap {
width: 97.7em;
margin:0 auto;
}
.custom #container {
margin: 0;
float: left;
}
.custom #gutter {
background: #ffcb19 url(images/gutter.png) repeat-y center bottom;
float: left;
padding: 0;
margin-top: 63px;
position: relative;
}
.custom #headerrunner {
background: url(images/back.png) repeat-x;
}
.custom #footerrunner {
background: url(images/footer.png) repeat-x 0 bottom;
}
.custom #gutter-upper {
background: url(images/gutter-top.png) no-repeat center top;
padding-top: 45px;
}
So this works like a champ, with the sole exception that in Internet Explorer, the layout no longer remains centered, but rather is left justified. I'm kind of beating my head against a brick wall on this one now... anybody maybe have an idea? Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
why is the top border on the links called "Sva Ponuda Farovi Felge Pragovi Retrovizori Spojleri" not showing up in IE?? http://www.xtreme-style.com/item.cfm?prodID=371&ID=0 here is my css code for the links Code:
/**BEGIN CATEGORY LINK EFFECTS**/
a.category_links:link {
color:#003366;
text-decoration: none;
background-color:#efefef;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
}
a.category_links:visited {
color: #003366;
text-decoration: none;
background-color:#efefef;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
}
a.category_links:hover {
color:#FF3300;
text-decoration: none;
background-color:#FFFFFF;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
}
a.category_links:active {
color: #003366;
text-decoration: none;
background-color:#efefef;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
}
/**BEGIN CATEGORY LINK EFFECTS**/
a.category_links_selected:link {
color:#FF3300;
text-decoration: none;
background-color:#FFFFFF;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
font-weight:bold;
}
a.category_links_selected:visited {
color:#FF3300;
text-decoration: none;
background-color:#FFFFFF;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
font-weight:bold;
}
a.category_links_selected:hover {
color:#FF3300;
text-decoration: none;
background-color:#FFFFFF;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
font-weight:bold;
}
a.category_links_selected:active {
color:#FF3300;
text-decoration: none;
background-color:#FFFFFF;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
font-weight:bold;
}
Thanks in Advance. Sorry problem solved! On my new layout I have a navigation box in which the inside needs to contain 5 x 75px wide boxes, all on the same line (Using float:left), but due to the way FireFox and IE handle borders differently the size needs to be 381px wide in IE (Due to the 3px border) and only needs to be 375px in Firefox. Obviously for now I have opted to go for 381px as the width, as it works in Firefox too, but it makes a few pixel gap on the right, is there anyway to get around this?? Thanks in advance. I have a small problem with the way borders are displaying around a rounded box in IE. Below are screen shots of what it looks like in FF (which is correct) and IE (broken): http://img332.imageshack.us/img332/7734/example1do7.jpg http://img307.imageshack.us/img307/4980/example2xo5.jpg As you can see, in IE the border runs over the GIF corner on the lower left and right, and the upper right. Here is the relevant CSS code: Code:
b.cn {
position: absolute;
height: 10px;
width: 10px;
margin: 0;
padding: 0;
background: url(images/greycircle.gif) no-repeat;
line-height: 1px;
font-size: 1px;
}
.box {clear: both; position: relative; background: #000; width: 425px;}
b.tl {top: -1px; left: -1px; background-position: top left;}
b.tr {top: -1px; right: -1px; background-position: top right;}
b.bl {bottom: -1px; left: -1px; background-position: bottom left;}
b.br {bottom: -1px; right: -1px; background-position: bottom right;}
div.box {
margin: 0 0 20px 0;
}
div.box {
border: 1px solid #999999;
background-color: #be9;
color: #000000;
background: url(images/boxgrad.gif) repeat-x top left;
float: left;
}
div.box .boxbody {
padding: 10px 20px 10px 20px;
border: none;
}
.boxhead {
font-size: 16pt;
font-weight: bold;
}
.boxtext {
font-size: 11pt;
}
and the relevant HTML code: Code: <div class="box"> <div class="boxbody"> <span class="boxhead">This is the title</span><br> <span class="boxtext"> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </span> </div> <b class='cn tl'></b> <b class='cn tr'></b> <b class='cn bl'></b> <b class='cn br'></b> </div> Any help would be greatly appreciated. Well, just imagine. My table displays beautifully in Firefox, but it looks like a third-grader did it in IE7. IE7 will not display a border in connection with cells that have no data. The list is populated from a five-column database and not every field has an entry for every column. In Firefox the bottom border extends across every cell regardless of content. Any ideas? CSS: .NewSOL #guardtable td { vertical-align:top; border-bottom-style:solid; border-color:#666666; border-bottom-width:thin; } .NewSOL #guardtable tr { border-bottom-style:solid; border-color:#666666; border-bottom-width:thin; } THANK YOU!! New to using CSS for layouts and I'm having an issue with getting an img to appear within a div without a border. Here's my code, with a screenshot showing below it: Code:
<div class="leftmenu">
<div class="lnavbtn">
<img src="images/leftnavbtn1.gif" border="0">
</div>
</div>
.leftmenu {
margin:0px;
border:0px;
padding:0px;
width:150px;
height:100%;
background-color:black;
}
.lnavbtn {
align:right;
margin:0px;
border:0px;
padding:0px;
}
Even with all the padding/margin/padding 0 stuff, I still get a 2 px border around the image. I want it to be clean all the way around. This happens in firefox and IE. Any suggestions? Hi, I am trying to apply a bottom-border to a TR element. The border shows fine in Firefox, but will not display in IE6. Any ideas what is causing this? Page: http://explosiveracing.net/wow-guild/forum/ CSS: http://explosiveracing.net/wow-guild/css/forum.css(Under the .headers declaration) Hi, I've got weird issue: I have three div's that are positioned relative below each other. Together they compose a box, where the top has a background, the middle has a background and the bottom has a background. The middle part holds content and can expand vertically so the box is flexible in height. The background tiles vertically so the picture of the border stays intact when it increases in height. The weird thing is that when a border is not defined for the middle part: PHP Code: border: 0px solid #ffffff; that FF gives it a default white border of some 5 pix or so. In IE it works fine. When I do define a border, the div shows properly, but then I have a border that I don't want (see example white border). I can define the border to be transparent: PHP Code: border: 1px solid transparent; but that only works in FF and not in IE (where it shows up black). I can also define the border to be none: PHP Code: border: 1px none #ffffff; But that works fine in IE, but in FF I get the 5px white border again.... Here's my css: PHP Code: .contentbin { position: absolute; margin: 0px; height: 475px; width: 780px; top: 146px; left: 222px; padding: 0px 0px 0px 0px; border: 0px solid #ff0000; z-index: 1; } .contenttop { position: relative; margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; padding: 0px; width: 780px; height: 17px; border: 0px solid #ff0000; background-image:url(../images/contentvensters/contentframe_gr1.jpg); background-repeat: no-repeat; } .contentmid { position: relative; margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; padding: 0px 0px 0px 0px; width: 780px; border: 1px solid transparent; background-image:url(../images/contentvensters/contentframe_midback.jpg); background-repeat: repeat-y; } .contentbottom { position: relative; margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; padding: 0px; width: 800px; height: 17px; background-image:url(../images/contentvensters/contentframe_gr1_onder.jpg); background-repeat: no-repeat; } .contentpadder { position: relative; margin-top: 10px; margin-left: 20px; margin-bottom: 10px; margin-right: 10px; padding: 0px 0px 0px 0px; border: 0px solid #000000; } Here's the html: PHP Code: <div class="contentbin"> <div class="contenttop"> <img src="images/spacer.gif"> </div> <div class="contentmid"> <div class="contentpadder"> Example text </div> </div> <div class="contentbottom"> </div> </div> I've attached screenshots for the different situations. Any help is greatly appreciated! Cheers, Gurt Hi, here's the CSS layout: http://www.abhiram.astahost.com/newlayout4/ The menu layout has been taken from 'Suckerfish menus' in http://www.alistapart.com The curved borders has been taken from http://www.webreference.com/program..._borders/2.html I've been trying to make curved borders for the header and the content. It displays it just the way I want it to in Firefox, but for some reason, the content part is giving a big gap in IE. I've used the same code with minor adjustments for both header and the content, but there is a problem only with the content. I've spent 2 hours and am at my wits end. Any leads? Source: http://www.abhiram.astahost.com/newlayout4/index.html http://www.abhiram.astahost.com/newlayout4/mystyle.css http://www.abhiram.astahost.com/newlayout4/iefix.js Thanks. 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. |
|||||||