|
CSS - Argh Ie Css Troubles
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 Similar Tutorialshttp:// 192.168.0.253/ index.php?option=com_content&view=article&id=50&Itemid=67 I need for the content to stack in front of content (as it currently does) so the content appears to scroll behind it. BUT - I need for the footer to sit at least below the fold so that it isn't so obtrusive. I'm tired of googling and can't spend any more hours trying to get it to work!! It's an artisteer template, joomla. Help? THANK YOU!! Ok I've been working on this for hours. WordPress is generating some HTML that isn't displaying correctly. At this point I'm just working with the following CSS and HTML: CSS: Code: div#navcontainer {
border: 1px solid blue;
padding-left: 20px;
margin: 0;
width: 177px;
position: relative;
left: 0px;
}
div#navcontainer div#pagenav li.pagenav { /* the outermost list item; seems to apply to the title of the section */
font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
padding-left: 0em;
padding-right: 16px;
margin-left: 0;
width: 175px;
font-weight: normal;
list-style: none;
list-style-type: none;
color: #4f2b0d;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item current_page_item a: link {
display: inline;
padding-bottom: 12px;
color: #4f2b0d;
position: relative;
left: -20px;
}
/* these are the links */
div#navcontainer div#pagenav li.pagenav ul li.page_item a:link { /* any Page item */
display: inline;
width: 175px;
font-weight: normal;
color: #4f2b0d;
line-height: 18px;
margin: 0;
padding-bottom: 0.25em;
text-decoration: none;
list-style: none;
list-style-type: none;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item a:hover { /* any Page item */
display: inline;
width: 175px;
font-weight: normal;
color: #4f2b0d;
line-height: 18px;
margin: 0;
padding-bottom: 0.25em;
text-decoration: underline;
list-style: none;
list-style-type: none;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item current_page_item a:link {
font-family: Georgia;
font-size: 36px;
color: #4f2b0d;
}
HTML: Code: <div id="inside_left_column">
<div id="sidebar">
<ul id="navcontainer">
<ul class="pagenav">
<li class="pagenav">About JCDS
<ul>
<li class="page_item page-item-58"><a href="...?page_id=58" title="Our Mission">Our Mission</a></li>
<li class="page_item page-item-56 current_page_item"><a href="...?page_id=56" title="Welcome from the Head of School">Welcome from the Head of School</a></li>
<li class="page_item page-item-60"><a href="...?page_id=60" title="School Leadership">School Leadership</a></li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
I'm attaching screenshots of what it looks like now (purple underlined links, section title not bold, too much indentation, bullets displaying for all pages), and what I want it to look like (brown text, bold text for section name, no underlines (only on hover), left-aligned, bullet only on current page). I would love to get some help with this! -- TIA Laura S. I have now spent the last 14 hours trying to rectify some problems I am having after I re-coded the page to change tables to CSS. The main area is overlapping with the right area. The site should look like this: http://www.attorneywebcreations.com but it looks like this in CSS format: http://www.attorneywebcreations.com/test.html Someone please help! heya still very new to css and IE is displaying whitespace between the two navigations and i cant fr the life of me find a fix... Well i set #tabcontentcontainer margins to -5 top it closes it but then displays wrong in firefox, is there a way to fix this ?? any help would be great thx. eg. Code:
#tabcontentcontainer{
margin: -5px 0px 0px 0px;
}
http://www.oraclestudio.com.au/css/start.php http://www.oraclestudio.com.au/css/style/two.css 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 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? 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! 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;
}
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 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. 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? 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 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! 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
}
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 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! 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? 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! |
|||||||