|
CSS - Ie6 And Resizing Columns - Conflict In Code Somewhere
Hey All,
I am modifying a wordpress template and have increased the size of the right side bar. All seemed fine in firefox but when I hit the site in IE, the column dropped to the bottom of the page. I can't seem to isolate the buggy code. Here's a snippit: Code: body {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
}
strong, em, b, i {
font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS", Verdana, sans-serif;
}
.comments input[type=text], .comments textarea, code {
font-family: Monaco, "Courier New", Courier, monospace;
}
/*- Page Structure */
body {
font-size: 62.5%; /* Resets 1em to 10px */
color: #444;
background: #eee;
text-align: center;
}
body.lang-ar,
body.lang-fa,
body.lang-he,
body.lang-hi,
body.lang-km,
body.lang-ko,
body.lang-ja,
body.lang-th,
body.lang-zh {
font-size: 75%; /* Resets 1em to 12px */
}
#page {
background: white;
text-align: left;
margin: 0 auto;
padding-top: 20px;
position: relative;
border: 1px solid #ddd;
border-top: none;
clear: both;
}
.columns-one #page {
width: 560px;
}
.columns-two #page {
width: 900px;
}
.columns-three #page {
width: 950px;
}
#header {
position: relative;
height: 200px;
background: #3371A3;
background-position: top right;
}
.content {
padding: 0 20px 10px;
}
body.columns-two #primary-wrapper {
float: left;
margin-right: 0px;
width: 0%;
}
body.columns-two #primary {
margin-right: 220px;
}
body.columns-two .secondary {
float: right;
}
#primary {
position: relative;
float: left;
width: 500px;
padding: 10px;
}
* html #primary {
display: inline;
}
.columns-one .secondary {
width: 240px;
border-top: 1px solid #eee;
}
.columns-three .secondary {
width: 175px;
}
.secondary {
width: 260px;
float: left;
font-size: 1em;
line-height: 1.5em;
color: #666;
position: relative;
padding: 0 10px;
overflow: hidden;
}
#sidebar-2 {
clear: right;
}
.comments {
text-align: left;
margin: 30px 0 0;
position: relative;
}
/*- Main Menu in Header */
ul.menu {
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
left: 20px;
width: 90%;
}
ul.menu li {
display: inline;
margin: 0;
}
ul.menu,
ul.menu li a {
padding: 5px 15px 6px;
}
ul.menu li a {
font-size: 1em;
color: white;
margin: 0;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
}
ul.menu li a:hover {
background: #333;
color: #eee;
text-decoration: none;
}
ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover,
ul.menu li.current_page_ancestor a,
ul.menu li.current_page_ancestor a:hover {
color: #333;
background: white;
text-decoration: none;
}
/*- Sidebar Subpages Menu */
.sb-pagemenu ul {
margin-left: 10px;
}
.sb-pagemenu ul ul {
margin-top: 2px;
}
.sb-pagemenu ul ul .page_item {
margin-left: 10px;
padding: 0;
}
.sb-pagemenu .current_page_item {
}
Is there something obvious here that causes the issue? Many Thanks dale littleredplanet Similar TutorialsHello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!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>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg Can someone look at this and see what my background is not appearing properly in Firefox? It only happens on my forum page that is the same page with the phpbb dropped into the middle. I am sure the css of phpbb is conflicting with my CSS for the web site. You will have to use a CSS browser plug in to view thee is just too much to post. Link to web site I've got a conflict and would appreciate a review. I'm trying to change to css forms. Looks fine in IE (majority of my site visitors), but Firefox throws the form below. I think it's in my column layouts, but I don't know how to get around it. To view: http://www.mtn.ncahec.org/aboutus/test.asp Base css is To view: http://www.mtn.ncahec.org/aboutus/base.css Think the culprit is: div.row { clear: both; padding-top: 10px; } div.row span.label { float: left; width: 25%; text-align: right; font-weight: bold; } div.row span.formw { float: right; width: 70%; text-align: left; } Thanks for any assistance. Hi Folks, I've created a new css skin for my asp.net storefront. Everything works as I'd like except that my content div keeps getting expanded beyond the barrier of the main wrapper. I think it's because of the tables that the storefront fills into the content div, but i'm not really sure. The problem only exists in IE. looks right in FF. If you look at this page in both IE and FF you can see the difference pinkgolftees.com/default.aspx?skinid=9 the main content area sticks out the right side and my max width of 500px seems to be ignored. Is there a way to control this with my stylesheet so I don't have to change the code for the storefront? is it in fact the tables that are causing my problem, or have I created an error somewhere else? thanks Mark ...And for once firefox is the problem! Well here it is part of the page in internet explorer first And here in firefox Why the overlap in firefox? Heres my css Code: body {
margin: 0px;
padding: 0px;
}
#header {
background-color: #9F0000;
width: 760px;
height: 150px;
margin-right: auto;
margin-left: auto;
z-index: 1;
background-image: url(../Graphics/png/headergradient.png);
background-repeat: repeat-x;
}
#NavDiv ul {
margin-top: 0px;
margin-bottom: 2px;
}
#MainContent table {
margin-right: auto;
margin-left: auto;
margin-top: 0px;
}
#NavDiv li {
list-style-type: none;
display: inline;
margin-right: 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
#NavDiv {
width: 760px;
background-color: #999999;
height: 25px;
margin-right: auto;
margin-left: auto;
z-index: 1;
padding-top: 5px;
padding-bottom: 5px;
}
.headertitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #000000;
}
#Footer p {
text-align: center;
}
#MainContent {
height: 600px;
width: 760px;
text-align: left;
margin-right: auto;
margin-left: auto;
background-color: #FFE784;
}
#MainContent p {
margin-left: 50px;
margin-right: 50px;
margin-top: -10px;
}
#Footer {
background-color: #9F0000;
height: 116px;
width: 760px;
visibility: visible;
background-image: url(../Graphics/png/headergradient.png);
background-repeat: repeat-x;
margin-right: auto;
margin-left: auto;
bottom: 0px;
position: static;
}
#header li {
color: #FFFFFF;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
#Footer p {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
}
#MainContent li {
list-style-image: url(../Graphics/png/glove.png);
margin-top: 1px;
}
And the page in question is http://bif.dmsbdesign.com/WWA.html Also anyone have the name of a good css book I can pick up? Hey guys, hit a problem with my div formatting in css. usig external style sheet with the two styles "header" and "regular". If i make the div class="regular" and then make the first line class="header" using the <a> tag without defining href (as it is not a link, and dont want it to be a paragraph). Then the content below the 1st line ends up superimposed over the 1st line. You understand what i mean? Hopefully this might be a common bug? Anyone know what is causing this? im using IE6.0 to check it for bugs. It is offline atm, as i am making it. but it can be made available if anyone needs to see it. Code: <div id="content" class="regular" style="top: 280px; background-color: F5DEB3; padding: 10px; padding-bottom: 0px;"> <a class="header">About New Zealand</a> <p>New Zealand is one of the most unique places in the world to dive. Its rich, nutrient-dense waters provide a home to a <a href="constructionpage.html" class="interlink">multitude</a> of exotic and amazing <a href="constructionpage.html" class="intralink">creatures.</a> Whilst many of the tropical wonders are summer visistors to our shores, there is an abundance of life all year round.</p> </div> Monkeewrench p.s sorry the code window is stuffed, first time using it, lol Hi, my CMS is bridged with a forum and the body background color from the CMS is overriding the forum css. I have similar issues with the p and td tags and perhaps more small stuff. How can I resolve the conflicts so I can set the forum styles independent of my Mambo template? Here is an example (body color issue) CMS code: Code: body {
margin: 10px 0px 10px 0px;
padding: 0;
font: 101.5%/1.4em "Trebuchet MS", Tahoma, Verdana, Helvetica;
letter-spacing: normal;
background: #232323 url(../images/body_bg.png) repeat-x center top;
color: #999;}
Forum code: Code: body {
font: 90%/85% Verdana, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 12px 0 4px 0;
}
Hi, I'm trying to get top both corners of my table header row to have a rounded corner each, but only one is appearing. The HTML is: Code: <tr> <td width="12%" class="tbl-col cnr-tl">Col 1</td> <td width="20%" class="tbl-col">Col 2</td> <td width="20%" class="tbl-col">Col 3</td> <td width="30%" class="tbl-col">Col 4</td> <td width="12%" class="tbl-col cnr-tr">Col 5</td> </tr> and the css is: Code:
.tbl-col {
background-color : #FFDA99;
color : #C00000;
font-size : 15px;
font-style : italic;
font-weight : bold;
height : 25px;
text-align : center;
}
.cnr-tl {
border-top-left-radius : 10px;
-moz-border-radius-topleft : 10px;
-webkit-border-top-left-radius : 10px;
}
.cnr-tr {
border-top-right-radius : 10px;
-moz-border-radius-topright : 10px;
-webkit-border-top-right-radius : 10px;
}
When the styles are in this order, the right hand column has a rounded corner, but if you swap the order of .cnr-tl and .cnr-tr, the left hand column has a rounded corner, but I can't get both end columns to have rounded corners at the same time. Putting both corner styles on one column does work, though, but I'd like to have both end columns to have rounded corners and the middle columns to have straight corners. Does anyone know how to do this? Debbie I have a header where I have two different div's that need to sit opposite each other on the same line (one aligned right and the other left). I used a float since it was the simplest way to get the job done. But in the div floating right I have three hyperlinks that have borders. When I float the div the border on the top and bottom dissappear when I remove the float the border on the top and bototm re-appear. any ideas? Here's the CSS... It's raw as I'm still developing these sections. Code:
#headerRight
{
float: right;
}
#headerLeft
{
float: left;
}
#header a:link
{
border: #000 solid 1px;
text-decoration: none;
}
#header a:active
{
border: #000 solid 1px;
text-decoration: none;
}
#header a:hover
{
border: #000 solid 1px;
text-decoration: none;
background-color: #333;
color: #ffffff;
}
#header a:visited
{
border: #000 solid 1px;
text-decoration: none;
}
I'm using IE7 (becuase my company demands it) and I have the following code 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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title></title> <body> <form> <input name='reason' type='text' size='75' value='' style='border:none;'/> </form> </body> </html> and it shows a border in my input even though there's a 'border:none;' but when I remove the Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> The border dissapears! Is there a different doctype that I'm supposed to be using here? my pages have the following structure, which you can see in action at http://www.auroratheatre.org: Code: <body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="content">
<div id="col"> left nav </div>
<div id="main"> main center column </div>
<div id="photocol"> right column </div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
and the following CSS: Code:
html, body, #wrapper {
min-height: 100%;
width: 100%;
height: 100%;
}
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 80%;
color:#000;
background-color:#F8ED97;
margin: 0 auto;
}
#wrapper {
padding: 0px;
background-image:url(../images/back.gif);
background-position:center;
background-repeat:repeat-y;
position: absolute;
}
html>body, html>body #wrapper {
height: auto;
}
#header {
text-align: center;
background-color: #000;
height: 90px;
width: 100%;
}
#content {
width: 775px;
margin: 0 auto;
text-align: center;
margin-bottom: 30px;
}
#col {
width: 130px;
background-color: #900;
float: left;
}
#main {
width: 404px;
float: left;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 30px;
text-align: left;
}
#photocol {
width: 220px;
float: left;
}
#footer {
clear: both;
background-color:#000;
text-align: center;
width: 100%;
position: absolute;
bottom: -1px;
}
This works well for compliant browsers, centering the content on the screen and putting the footer at the bottom of the viewport even if the content isn't long. This is what I want. The trouble is, in IE 5.0 it doesn't center the content, just the background, and everything is thrown to hell. A little scratching around revealed that if you want to center a div in IE 5.0, you need to use text-align: center. OK, but if I DO that, and add a text-align: center to the #wrapper div, then everything is OK in IE 5.0 and Mozilla, but NOT IE 6.0 - modern IE browsers do a weird thing of putting the footer to right of all the content, making the page scroll horizontally, which is ugly as hell. If I remove the position: absolute from the #footer div than that problem goes away, but the footer sits at the bottom of the content, not the viewport, and pages with short content look bad. Anyone know of a way to have it all ways? Centered content and absolute footer and happy IE 5.0? Thanks, -D Am hoping someone knows the deal here... I'm setting up a site where html skins feed into PHP to generate the final pages. It's very simple; just header, footer and main.html's for the index page. The problem: A DIV to the left of the main body holds a no-repeat background [to place an image in that area]. I want a slight overlap with the main body div; alas the second div contains links, and with even the slightest overlap of these 2 divs, the links go funky ~ you can't select them. I tried z-indexing it to no avail Does anyone know if there's a route around this conflict? The page: (URL address blocked: See forum rules) [koff. am just kicking it of layout wise, so do excuse the lack of actual content!] thanks for any help [hopey hopey] Hello everyone, I'm working on a word press design for my site and I'm having some problems with absolute positioning. The positioning is fine in and of itself but I've found that if the absolute positioned element is underneath a link, it voids out the link. The text for the link is there, just no link. I've tested this by removing the absolute positioned element and the links work fine after I do that. Any idea what's going on with this? This occurs in both Firefox and IE. I've validated the CSS as CSS 2.1. You can see what I'm talking about at my site randomdamage dot org (the forum wouldn't let me post the link) If you scroll to the bottom of the page you can see two links which are being affected, the comments link for the last post and the next page link. The absolute element is the red splatter graphic. Here's the relevant css: /*footer styles*/ #footer blockquote { background-image: url(images/splash.png); width: 850px; height: 100px; position: absolute; left: 5px; background-repeat: no-repeat; bottom: 63px; text-indent: -9999px; z-index:9;} #footer { clear:both; font-family: Georgia, "Times New Roman", Times, serif; padding-right: 20px; padding-left: 20px; padding-top: 20px; } #footer p { text-align:center; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding-top: 10px; padding-bottom: 40px; } Any help would be greatly appreciated. Hi im trying to detect ie or mozilla but i cant get it to work.. could somebody please tell me what is wrong with my code.. thanx in advance !!! Code: Code:
<head> <script language="javascript">
<!-- Begin
browser_version = parseInt(Navigator.appVersion);
browser_type = navigator.appName;
if (browser_type == "Microsoft Internet Explorer" && (browser_version >= 4)) {
document.write("<link REL='stylesheet' HREF="style.css" TYPE='text/css'>") ;
}
else if (browser_type == "Netscape" && (browser_verson >= 4)) {
document.write("<link REL='stylesheet' HREF="stylemozilla.css" Type='text/css'>") ;
}
// --></script>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>---</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
<!--
.Style9 {
font-size: 26px;
color: #85AC1E;
}
.Style13 {color: #85AC1E}
.Style15 {font-size: 19px}
.Style16 {font-size: 22px}
-->
</style>
</head>
I have been asked to create a font resize on a website. I can do the basics of it but I'm running into a couple snags Question 1 In my stylesheet, I have: Code: #centerCol {
float: left;
color: #333;
font-size: 10px;
padding: 10px 10px 10px 15px;
}
And in my code I have a function that contains: Code: document.getElementById('centerCol').style.fontSize = '12px';
It works fine to resize the centerCol ID but what if I want to only resize the <p> tags in the centerCol ID? Question 2 Is there a way to resize without the use of Javascript? Everything I've found so far includes it. Alright, this seems to be tricky, but here's the story: I've got a photography gallery I made for a friend, and the last thing that needs to be taken care of is cross-browser compatability. I'm down to one problem of image resizing for thumbnails in IE. I've seen a few solutions, but none of them seem to work, so maybe I'm just doing things wrong, but then again no site has talked about resizing both horiz. and vert. For the site, any image thrown on the page needs to be resized to no greater then 105x100. But please, don't tell me to use PHP for this - I'm very attached to the fact that the entire site weighs in at under 300 lines. Thanks, Brian Ziemek Anyone know how to get your website's background to resize as the page is manually resized when using IE? It resizes properly on both on mac and PC using Firefox, Safari, and Opera, but not IE (on PC). Thanks Hi, is there any way to achieve this effect (pseudocode) with CSS? if (image width > 100) add property width="100" to all img tags ie. i want to make all images larger than 100 pixels scale down I have a div centered in the middle of my page if i type a long paragraph between the two <div> tags it is all one line, and resizes the div, even though i have its width set to a fixed size? is there something im doing wrong? Im completely stumped thanks in advance I fixed it on my own, thanks for the multitude of responses, not. |
|||||||