|
CSS - Css Border Troubles
here is the code
[html] <center> <table width="750" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <table width="750" class="forumhome_bdr" border="0" cellpadding="0" cellspacing="0"> <tr> <td> content content content content ></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> [/html] well im adding something below "></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>" but it appears within the border...see the attached picture i want it to be under the border...... how? Similar TutorialsHi. 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>
Hi, First post, first issue ... I am having some difficulties with the tag <table> in a fluid layout. without the attribute width set to 100%, the table is at the the top. If I set it up, the table goes down to the bottom. Can anybody explain why? ----------- CODE -------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <TITLE>Title Here</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <STYLE> #outer_wrapper { width: 800px; } #container { float: left; } #left { background: #BBB; width: 150px; float: left; padding: 0px; border: solid 1px #000; } #main { background: #EEE; padding:4px; padding-left:160px; border: solid 1px #000; } table { border: solid 1px #A4A4A4; } </STYLE> </head> <body> <div id="outer_wrapper"> <div id="container"> <div id="left"> left here<br/><br/><br/><br/><br/><br/> </div> <div id="main"> <table cellspacing="0" cellpadding="2" width="100%"> <tr> <td align="top" valign="top"><b>Line 1</b></td> <td align="right">Line 2</td> </tr> </table> </div> </div> </div> <div id="footer"> footer here </div> </center> </body> </html> Can someone please take a look at my CSS on this page and let me know what fixes I need to implement/read about in order to get the page to look acceptable in IE. I've checked and both the CSS and HTML are valid. I'm feeling more and more confident in my CSS abilities as time goes by but I can't seem to get a grasp on ALL the fixes IE seems to require. Thanks in advance! stuboo I have been setting up a wordpress blog for my family, and have run into troubles getting it to show up the right way between browsers. In older versions of IE (5.0, 6,0), the blog posts are pushed down, and begin where the sidebars end. I am using a newer version of IE and the blog shows up perfectly. I have family members who use the older versions, and it shows up terrible. Is there anything that can be done with it? I am fairly new at web design. I am using the RockinPaper 3 column theme if that helps at all. Thanks for any help and advice! Here's my page. It's a catalogue of all my DVDs. I'm having a problem such that rows underneath rows with multiple lines of text (you'll see what I mean) are missed out. Anyone know what I'm missing? To save you all some time, here's the CSS for it: Code: div.dvd {
float: left;
width: 200px;
margin: 20px 40px 20px 40px;
text-align: center;
border: 1px;
}
is there any way to have the background of a table be at 50% opacity and the text be at 100% opacity? i've been playing with this code: style="filter:Alpha(Opacity=xx)" ...where xx is 50 or 100 and have placed it within the <table> tag and also within a <font> tag, but nothing seems to work. the font wants to be the same opacity as the table. is there any way around this? on a possible workaround, i've tried using semi-transparent PNG file as the background of the table, and that didn't work. i couldn't get the PNG file to do semi-transparent. it wanted to do a diffusion transparency, which looked like @ss. K, finally got a working drop down menu, pretty well exactly how I want it...however, in IE it works properly, but in FF it seems to grow in width and cover the drop down part up. Probably somethin to do with a preset 'td' width in my html, but not sure. Here is what i'm talking about, and here is the style sheet. Any help is greatly appreciated! http://turkeybot.info/flash/play.php?id=121 When you go below the game eand hover where it says to, the instructions for the game come up. Problem is, the z-index I set for it isn't working, and it's letting the form below it override it. What's the problem? Hello everyone. I am new to CSS and I have been trying to create a CSS layout composed of a 2x2 grid using DIVs. The top cells have fixed width and height, with the bottom ones having fixed width and variable height depending on the content. I achieved this with success as they look as intended in IE8 (don't have 9 available) and the latest versions of Firefox and Opera. In Chrome (and Safari for that matter), sometimes it will render just fine or look one or two pixels out of place depending on the width of the browser window. Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<style type="text/css">
html,body {
margin: 0px;
background-image: url(http://i.imgur.com/NHbHt.png);
background-repeat: repeat-y;
background-position: center;
background-color: #f7f4ee;
text-align: center;
}
#wrap {
width:750px;
margin:0px auto;
text-align:left;
}
#topleft {
display:block;
margin-left:1px;
float:left;
width:572px;
height:127px;
background-color:#ccc;
padding:0px 0px
text-align:left;
}
#topright {
display:block;
margin-left:1px;
margin-right:1px;
float:left;
width:175px;
height:127px;
background-color:#ffffff;
padding:0px 0px;
text-align:left;
}
#bottomleft {
display:block;
margin-left:1px;
float:left;
width:572px;
background-color: yellow;
padding:0px 0px
text-align:left;
}
#bottomright {
display:block;
margin-left:1px;
margin-right:1px;
float:left;
width:175px;
background-color:green;
padding:0px 0px;
text-align:left;
}
</style>
</head>
<body>
<div id="wrap">
<!-- Slideshow -->
<div id="topleft">
topleft
</div>
<!-- Logo -->
<div id="topright">
<img src="logo.png" alt="logo" width="175" height="127">
</div>
<!-- Contents -->
<div id="bottomleft">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id ipsum nec justo auctor tristique in eu sapien. Vestibulum commodo lacinia volutpat. Donec tempor imperdiet sagittis. Cras gravida viverra nisi eget adipiscing. Mauris quis sollicitudin odio. Nunc eu nulla enim, at tempor nibh. Maecenas iaculis egestas condimentum. Praesent non odio velit.
</div>
<!-- Menu -->
<div id="bottomright">
bottomright
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<p>Sidebar</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id ipsum nec justo auctor tristique in eu sapien. Vestibulum commodo lacinia volutpat. Donec tempor imperdiet sagittis. Cras gravida viverra nisi eget adipiscing. Mauris quis sollicitudin odio. Nunc eu nulla enim, at tempor nibh. Maecenas iaculis egestas condimentum. </p>
</div>
</div>
</body>
</html>
The lines shown are part of the background, as it was the easiest solution I came across with to make it look like the columns go all the way down to the bottom of the page. So, I believe my issue lies on the DIVs and/or the centered background but I have no idea how to work around this. Thanks in advance for your time and advice. Cheers Hi all probably a stupid question but i cant find the answer i am making a site and when i zoom out in the browser the page sits to the left, how do i make it stay in the center Cheers Howdy, Very simple css layout, but IE (7) is messing it up. What else is new. Header div is centered with the curved top border (16 pixels high), uses background tag in css. body mas a main background, which is centered. it's an 800pixel wide gif with 20 pixel sides which leaves 760 white pixels in the middle. main container is 760 pixels wide, and centered thus creating the layout. header and body combined should make a seamless border around the main container. but it doesn't in IE. why not?!?! it works well in FFX, Chrome, Safari, Opera. argh. can't seem to post urls, so i'll have to post my code: html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>GreenSky Capital Inc. :: Customized Financial Solutions :: Home</title> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="header"></div> <div id="container_main"> Put some text here. </div> </body> </html> CSS: Code: html,body {
margin: 0px;
padding: 0px;
background: #e0e0e0 url(../images/bg_main.gif) repeat-y center top;
font-family: verdana,"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #6C6C6C;
text-align: center;
}
#header { margin: 0 auto; width:800px; padding:0; height: 16px; background: #e0e0e0;background: url(../images/bg_top.gif) no-repeat top right ;}
#top_nav { margin: 0; padding:0; width:230px;height: 180px;}
#top_sep { margin: 0 auto; padding:0; }
#container_main { margin: 0 auto; padding:0;width:760px; background:#fff; }
#container_content { width:720px; margin: 0 20px 0 20px; background:#fff; text-align: left; }
#roscripts_m4 { margin:0; padding:0;width:100%;}
#roscripts_m4 li { margin:0; padding:0;display:inline;list-style-type: none; }
#roscripts_m4 a:link, #roscripts_m4 a:visited { color: #056839;width:230px;text-align:left;text-indent:15px;float:left;font-size:11px;height: 30px;line-height: 30px;font-weight: bold;text-decoration: none;border-bottom:1px solid #6AB94E;}
#roscripts_m4 a:link.active, #roscripts_m4 a:visited.active, #roscripts_m4 a:hover {color: #fff;background: url(../images/bg_nav.gif) no-repeat top left ;}
#news, #support {background: #efefef; }
#footer { margin: 0 auto; padding:0; width:760px; height: 30px; clear:both; text-align: center;}
.sidebox { margin-top:40px; background: url(../images/bg_side.gif) no-repeat top center; height: 300px;}
.sidebox_head h2 { margin: 0; padding: 16px; 0 0 10px; color: #fff; font-size: 12px; }
.sidebox_body { margin: 0; padding: 0 0 0 10px; border: 0; font-size: 11px; }
.sidebox_body p, .sidebox_body form {margin: 0; padding: 0;}
.sidebox_body form label { width: 200px; position : relative; display : block; }
.sidebox_body form label input { position : absolute; left : 40%; top : 0px; }
.sidebox_body form input,.sidebox_body form textarea { font-size: 10px; border: 1px solid #c0c0c0; background: #e0e0e0; }
.sidebox_body form textarea { font-family: verdana, arial, helvetica; font-size: 10px; width: 200px; height: 50px; overflow:hidden}
.sidebox_body form span { float:right;margin-right:20px;}
.sidebox_body form submit {border: 1px solid #c0c0c0; background: #e0e0e0;}
#content_right h1 { font-size: 20px; color: #056839; width: 100%; border-bottom:1px solid #056839; }
#content_right h2 { font-size: 12px; color: #056839; width: 100%; }
#content_right li {padding-bottom: 10px;}
any help would be much appreciated! thanks, ynot2k I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... Hi all, Building a test site here. The drop-down menus work fine in FF and Opera, but in IE, the sub-menus appear to the right when they come up. I can't figure out why. Help? Also, for some reason, the submenus seem awfully wide. I can't seem to find the place in the CSS that controls this width. Help? Thanks! Chris So I've got this XHTML: Code: <div class="mainNav"> <ul class="mainNavUL"> <li><a class="empty" href="#"></a> <a href="#">Home</a></li> <li> <a class="unselected" href="#"></a> <a href="#">News</a> <ul class="subNavUL" id="menu_news"> <li><a href="#">Agriculture</a></li> <li><a href="#">Business</a></li> <li><a href="#">Education</a></li> <li><a href="#">Environment</a></li> <li><a href="#">Politics</a></li> <li><a href="#">Special Reports</a></li> <li><a href="#">Transportation</a></li> </ul> </li> </ul> </div> What I'm attempting to do through CSS, is control the styling of the anchor classes 'unselected' and 'selected' through inheritance only. The reason I'm doing this is because I'll have other UL's with different classes, which will have the same structure as above. I've tried everything I can think of, but am clearly hitting a brick wall. Any ideas? I have a layout of the following structu Code: #page {
background-color:#000000;
width: 780px;
margin: 0px;
padding: 0px;
}
#content {
width: 650px;
height: 500px;
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
float: right;
}
#sidebar {
width: 130px;
height: 450px;
background-color:#666666;
padding: 0px;
margin: 0px;
float: right;
}
Inside the body tags, I placed the following code: Code: <div id="page"> <div id="content">/*some content*/</div> <div id="sidebar">/*navigation*/</div> </div> Now I am running in the following troubles. As you can see, the parent layer (page) has a black background, the others are white and grey, respectively. I would like the parent (background) layer to grow with the navigation/content layers, dependent on which layer is higher/taller... get the idea? Thus far, the parent layer "page" does not show at all, neither does its black background. Any idea how to make it dependable? I've been trying hard to figure it out, can't seem to do it. Perhaps the float attibutes cause it not to have any influence on the parent layer? Thanks guys! http://www.sdtars.com/development/ I can't figure out why I can't get them to popup over the other menus. Can anyone see what I am doing wrong? Thanks! Hello, I am having some problems in IE with image backgrounds. As you can see the difference in my site with IE and FF the background images are all off. This is caused by the padding I am assumming. I put a red border around the trouble spots so you could see whats going on. Any ideas? Thanks I have a section of my application where I need a menu containing forms in a box aligned to the left. When one of these form names are clicked, I need it to unhide the div and display the proper form to the right of the menu. This works fine in Internet Explorer, but when the forms become visible in Firefox they completely cover up the menu. Here's what I've got: CSS Code: #forms .form { display: none; position: absolute; left: 0; top: 0; }
#forms { position: relative; }
#adminbar { float: left; border: 1px solid #000; padding: 5px; position: relative; }
HTML Code: <div id="adminbar">
<a href="javascript:void(0);" onclick="hide(getElementsByClassName('form')); show('software');">Software</a>
</div>
<div id="forms">
<div id="software" class="form">
<h1>Software Administration</h1>
<form class="ttcform">
<fieldset>
<legend>New Software Item</legend>
<ol>
<li>
<label>Software Name</label>
<input type="text" size="30" name="name"/>
</li>
</ol>
</fieldset>
<fieldset class="submit" align="center">
<input type="submit" name="submit" value="Create Software"/>
</fieldset>
</form>
<hr>
<form class="ttcform">
<fieldset>
<legend>Edit Software Item</legend>
<ol>
<li>
<label>Software Name</label>
<input type="text" size="30" name="name"/>
</li>
</ol>
</fieldset>
<fieldset class="submit" align="center">
<input type="submit" name="submit" value="Create Software"/>
</fieldset>
</form>
</div>
</div>
Javascript (In case you need it): Code: function show(el) {
if(typeof el == 'string') {
document.getElementById(el).style.display = 'block';
return true;
}
else if(typeof el == 'object') {
for(var i = 0; i < el.length; i++) {
if(typeof el == 'object') {
hide(el[i].id);
}
else {
hide(el[i]);
}
}
return true;
}
return false;
}
function hide(el) {
if(typeof el == 'string') {
document.getElementById(el).style.display = 'none';
return true;
}
else if(typeof el == 'object') {
for(var i = 0; i < el.length; i++) {
if(typeof el == 'object') {
hide(el[i].id);
}
else {
hide(el[i]);
}
}
return true;
}
return false;
}
function getElementsByClassName(className) {
var retEls = [];
var els = document.getElementsByTagName('*');
for(var i = 0; i < els.length; i++) {
if(els[i].className == className) {
retEls.push(els[i]);
}
}
return retEls
}
Overview I am having lots of trouble with inheritance when I am making classes. Ultimately I tried to create a simple example but I just don't seem to get what is happening. ----------------------- Question Why would the text contained in the <li> tags of "main" & "submain" be colored yellow? I was expecting "main" to be black and "submain" to be yellow. ----------------------- Sample Code PHP Code: <html> <head> <title>test css</title> <style type="text/css"> .main {color:black;} .main h3 {font-size:4.0em;} .main ul, li {font-size:1.4em;list-style:none;padding: 5px;} .submain {color:red;} .submain h3{font-size: 2.0em;} .submain ul, li {color:yellow;font-size:1.0em;padding: 5px;} </style> </head> <body> <!-- main test --> <div class="main"> <h3>Testing Main</h3> <ul> <li>Main Test</li> <li>Main Test</li> <li>Main Test</li> </ul> </div> <div class="submain"> <h3>Testing Submain</h3> <ul> <li>submain test</li> <li>submain test</li> <li>submain test</li> </ul> </div> </body> </html> Anyhelp is appreciated. Cheers, CH... I have been working on this issue further and came up with one solution I think. Basically I think it is incorrect to do this: PHP Code: .submain ul, li {color:yellow;font-size:1.0em;padding: 5px;} So this way works but is is correct? PHP Code: .submain ul, .submain li {color:yellow;font-size:1.0em;padding: 5px;} The way I am thinking this may be interpretted is all <ul> in submain and all <li> in submain will be yellow. My first way I think I was saying is all <ul> in submain and then all <li> will be yellow. This was over riding the first call which was all <li> red. Hmmm.. Am I thinking correctly now? |
|||||||