|
CSS - Div Formatting Conflict
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 Similar TutorialsCan 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 ...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? 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 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'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? 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;
}
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;
}
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 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. 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 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] 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>
hi all, need one help from you.. i have to format a div tag which is generated dynamically.. if there are only 4-5 lines consists in that div it works fine, but the lines go out of bound it takes scroll bar overflow:auto; overflow-x:hidden; height:200px; in mozzila it works fine as the scroll bar comes inside the div tag... but in internet explorer .. the scroll bar goes out of the div tag.. can anybody help me... I am running amuck! know this should be basic, but Firefox and IE both handle the <h1> tags differently: 1) IE seems to put equal whitespace above and below the element 2) Firefox seems to put less whitespace AFTER the <h1> tag. Anyway to smooth this out so it displays close to similiar? My gratitude ahead of time... Hey All, I'm trying to make text float to the right, the challenge part of it all is that i need to try and do this using a class that get asigned to the text so i can't really use a DIV or anything to do this. Really what i want is a bunch of text in a text box aligned to the right with a grey background. Anythoughts or ideas? Really in a binde here. Ok, so I'm having some problems getting my site to look how I want. The formatting appears correctly in all browsers (I think) but in IE it's horribly messed up. This is my first site that I'm making just to learn some things and I don't know much CSS at all. I've tried reading up but am not sure how to properly use CSS to make this work cross browser capable. Basically, I want my text box search bar properly centered along with my logo and the "advanced search" and "preferences" links. I painted over some stuff for privacy heh. In FireFox, it looks like this ( http://img261.imageshack.us/img261/9625/ex1hu0.jpg ) but in IE, it looks like this ( http://img523.imageshack.us/img523/4631/ex2sm7.jpg ). So basically in IE the search bar and what not is aligned too high! How can I use CSS to make it looks like it does in FireFox, in all browsers!? I learn best by example so thanks much for any help!!! My probably terrible code is as follows: Code: <table>
<tr>
<td valign="middle">
<a href="/home"><img src="logo.jpg"></a>
</td>
<td valign="middle">
<form id="SearchBarForm" action="search.php" method="get">
<input type="text" name="q" size="30" maxlength="150" value="'.($q).'" title="Search">
<select name="FTS"> <!-- FTS = File Type Selections -->
<option value ="File_Type">File Type</option>
</select>
<font size=-1><input type="submit" name="Submit" value="Search"></form></font>
</td>
<td nowrap> <a href=/advanced_search.phpf>Advanced Search</a><br> <a href=/preferences.php>Preferences</a>
</td>
</tr>
</table>
I've run up against a css problem with the homepage on this site under development. In IE8 the right column in the main content area contains an image swapper and the column pushes out beyond the page content area. It displays properly in FF3. I've tried a variety of margin, padding and width changes without success. How do I correct this for all IE and FF browsers? To avoid bloat I have not included the stylesheet here, but it can be viewed in FF. Hi, Really new to this css stuff and i'm sure i'll get a beratting for asking such a simple question but here goes... What i need is a cell with a linked word in it. Initial state is white background with blue text. On rollover i would like the whole cell to turn blue with white text. I'm sure this is simple but just need a point in the right direction. Thanks for any help Tom Hi, I have changed my test site so I can display an ad and so that each section is separated into different sections, anyway after changing a few things and fixing a few problems I have found that the problem is happening with my #ContentMain except I have no idea how to fix it. Essentially #ContentMain is appearing before it should be (ignoring the formating and appearing behind everything) when it should be appearing directly after <div id="main1"> everything I have tried, I have had no success with. Also as I have separated the gap I had between the top links and the main picture to add in in ad section (no actual css setting for it as everything I have tried hasn't worked) Where as before my editing the content appeared where it was meant to, so any help would be greatly appreciated and if you need me to explain something in more detail let me know. TorqueSRO - Click Me |
|||||||