|
CSS - Just In Case There Is A Better Solution...
Recently I started making my very first doctype=strict page and am trying to make it act the same way in IE and Firefox. After much time spent in research and experimentation I ditched tables in favor of DIVs cause 100% tends to be either too wide or too tall. The only good solution I could find is using javascript to calculate widths and heights. This is fine since the entire page is one big ajax playground.
So anyway, research says this is cause width/height percentages don't take padding and borders into consideration. Let's say I set an outer div to 100 pixels wide. Then I give it a 2 pixel padding on the left and right side. Then I give it a 1 pixel border on the left and right side. Then I add another DIV inside this container and set it to 100% width. For some reason, both IE and Firefox feels the need to calculate this as 106 pixels wide instead of 100 pixels. I'm not sure if the HTML standard says this has to be true, but I can find no justification for such a practice. I understand that they prefer that the 100 pixels apply to only the content - that padding and borders increase the width of the object. But I don't see why objects that are inside of that container would try to stretch wider than the content width. I say all the above just in case there's something I'm missing and somebody would like to correct me. So now for my question. Other than using javascript, is there a way to make sure that objects inside the container have the width of the container's content width rather than the container's actual width. Any answers must apply to the height as well, since I understand that there is a somewhat unreliable behavior (in my testing) where a DIV automatically takes up as much width as is available. Similar TutorialsHow do I make a paragraph sentence Case (first alphabet of each word capital) in CSS? Thanx for your help. What is the best solution for enabling IE 6 and below to be able to display PNG 24 images correctly? I've seen several workarounds on the Web and wondered which one that most people are using? Hello I would like to change the cursor when it is over on a link with an defined file extension. It does not work well: the test.zip link is OK while the test.ZIP link does not have any effect. How can i disable the case sensitive in the following code so that work? Thank you PHP Code: <html> <head> <style type="text/css" media="screen"> a[href*=".zip"] {cursor:help;} </style> </head> <body> <a href="http://www.abc.com/test.ZIP">test.ZIP</a> <a href="http://www.abc.com/test.zip">test.zip</a> </body> </html> please delete post...problem resolved. I'm trying to figure out how come the setting for the "base" <div> applies the margin rules to the <ul> in this example (see halveway down the article) URL and it does not work for me when I re-create the same code here URL As far as I can tell I'm duplicating something that seems fairly simple. So the solution is probably a simple one, why doesn't the margin rules affect the <ul> tag in my HTML and why does it work in the example? Sincerely, Aaron S Is there any way to remove tabindex from inline? I have tables in a form that are dynamically made with a php function I wrote. My problem is I cant specify tabindex in the loop because form elements in different tables will have identical index's. Any help is always appreciated. URL (Why doesn't the image show up?) http://drupal.org/files/issues/browser%20view.jpg The small div with the class "left" doesnt stretch to 100%. What could be the problem? Here is the html: Code: <div class="content-wrapper">
<div class="top">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="content">
<div class="left"></div>
<div class="center">
<div id="content" class="column"><div class="section"></div>
<div class="right"></div>
</div>
<div class="bottom">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</div>
And here the CSS: Code: .content-wrapper .top,
.content-wrapper .content,
.content-wrapper .bottom,
.content-wrapper .left,
.content-wrapper .center,
.content-wrapper .right {
float: left;
}
.content-wrapper .top,
.content-wrapper .content,
.content-wrapper .bottom {
width: 100%;
padding: 0px 8px;
}
.content-wrapper .center {
width: 100%;
}
.content-wrapper .left,
.content-wrapper .right {
height: 100%;
min-height: 100%;
}
.content-wrapper .left {
width: 8px;
margin-left: -8px;
background: url("../images/side_left_bg.png") repeat-y;
}
.content-wrapper .right {
width: 8px;
margin-right: -8px;
background: url("../images/side_right_bg.png") repeat-y;
}
.content-wrapper .top,
.content-wrapper .bottom,
.content-wrapper .top .center,
.content-wrapper .bottom .center {
height: 9px;
}
.content-wrapper .top .left {
background: url("../images/edge_top_left.png") no-repeat;
}
.content-wrapper .center {
background: white;
}
.content-wrapper .top .right {
background: url("../images/edge_top_right.png") no-repeat;
}
.content-wrapper .bottom .left {
background: url("../images/edge_bottom_left.png") no-repeat;
}
.content-wrapper .bottom .center {
background: url("../images/bottom_bg.png") repeat-x;
}
.content-wrapper .bottom .right {
background: url("../images/edge_bottom_right.png") no-repeat;
}
Any help on this would be very appreciated! Thanks in advance! I seem to have had success creating a cross-platform method for centering tables. #centeredTable { display:table; width: auto; margin-top: 5px; margin-left: auto; margin-right: auto; text-align: center; } You can view an example he http://jim.centerfuse.net/css/table...ed-example.html IE ignores display:table and doesn't successfully interpret margin: auto, but text-align: center seems to take care of centering the table in IE. Tested in Opera 7, IE 6, IE 5.5, Mozilla 1.5. (I have the top margin in there just to move it away from my header a bit.) It does require that you set a width on your table, or it will simply fill the entire page, though you could get around that with a container DIV (like this: http://jim.centerfuse.net/css/table...able_width.html ). I thought others might be interested in seeing this, since it seems to be a common problem. I had originally developed a slightly more complicated way of doing what I need to do, but this seems to work just as well. My main concerns are that future versions of IE will break this code because of added support for display:table and margin:auto, or that the specs for display:table; will change in the future, since it seems to be entirely unsupported in some browsers (namely IE). Comments/Flames welcome -Jim Keller Hi, all. I am designing a shoppingcart for a business and I am hoping to have left column nav buttons that are css controled. Each link has a css background and borders. My original plan was to have popup tabs using css. However, I cannot find any IE equivalent for the Code: -moz/webkit/o-transform:TranslateY() or similar property. Any ideas? Hi, I am struggling to find a solution for a drop down menu over a week in this site: http://tinyurl.com/47apbad In firefox it looks good but not in IE6 and IE7, can someone help me to find a solution? Code: /* -- top menu --*/
#main-menu {
width:980px;
padding-top: 15px;
padding-bottom: 10px;
}
#main-menu ul {
list-style:none;
padding:0px;
margin-left:15px;
font-size:15px;
margin-bottom:0px;
text-transform:uppercase;
}
#main-menu ul.sf-menu li {
float:left;
*width:80px;
margin-left: 5px;
}
#main-menu ul.sf-menu li:hover {
background-image:url(images/main-manu-bg-li.png);
height:31px;
background-repeat:repeat-x;
display:block;
color:#333333;
}
#main-menu ul.sf-menu li a{
padding:5px 10px 0 10px;
*padding:5px 8px 0 8px;
color:#fff;
height: 31px;
}
#main-menu ul.sf-menu li.current_page_item a {
background-image:url(images/main-manu-bg-li.png);
height:31px;
background-repeat:repeat-x;
display:block;
color:#333333;
padding-right: 10px;
padding-left: 10px;
font-weight:bold;
margin-bottom:-5px;
float:left;
/*width: 80px;*/
}
#main-menu ul.sf-menu li.current_page_item a:hover {
margin-top:0px;
}
#main-menu ul.sf-menu li.current_page_ancestor a {
background-image:url(images/main-manu-bg-li.png);
height:31px;
background-repeat:repeat-x;
display:block;
color:#333333;
padding-right:10px;
padding-left:10px;
font-weight:bold;
margin-bottom:-5px;
}
#main-menu ul.sf-menu li ul {
background:url(images/topnav_bg.gif);
padding:0px 15px;
margin:0px;
margin-top:-7px;
-moz-border-radius: 0 0 8px 8px;
}
#main-menu ul.sf-menu li li ul.children {
margin:0 0px 0 45px;
background:url(images/topnav_bg.gif);
}
#main-menu ul.sf-menu li.current_page_ancestor li a {
background-image:none;
color:#fff;
padding-left:0px;
padding-left:0px;
padding-top:10px;
padding-bottom:0px;
font-weight:normal;
}
#main-menu ul.sf-menu li.current_page_ancestor li:hover a {
margin-bottom:1px;
}
#main-menu ul.sf-menu li.current_page_item li a {
background-image:none;
color:#fff;
padding-left:0px;
padding-left:0px;
padding-top:10px;
padding-bottom:0px;
font-weight:normal;
}
#main-menu ul.sf-menu li li a {
padding:0px 0px;
padding-top:10px;
padding-bottom:10px;
margin:0px;
height:auto;
background:none;
}
#main-menu ul.sf-menu li li:hover {
background:none;
padding:0px;
margin:0px;
padding-bottom:4px;width:240px;
}
#main-menu ul.sf-menu li li a:hover {
color:#a6b4bc;
background:none;
padding:0px;
padding-top:10px;
padding-bottom:12px;
}
#main-menu ul.sf-menu li li {
padding:0px;
margin:0px;
background:none;
}
No, i'm not pregnant, nor can i be (male and all), but here's my question... I've got a menu from bullets, and i did this: Code: #nav-menu li:first-child {
border: none;
}
Naturally, it looks perfect in Firefox, but IE6 ignores it. Please note, i'm extremly new to CSS, asin.. just started saturday lol... but i'm a quick learner! Anyone know of a work around that'll hide the border in ie6? Thanks! Scenario::: So I got < div > or < p > with < img > inside. < img > that has < float:left >, so that text nicely warps around the < img > along its right side. I also got my < p > with < border:1px solid #CC33CC >, as I have lets say five words within < p >, now my < p > element and its border wraps around text and does not take < img > into consideration and it will seem fine as normal flow has been broken as explained by CSS standard, but I want to make sure that this border of my < p > or < div > element warps around the < img > as well, so we fix it with < div > that has < clear:both > and style, just an empty element. Question::: I would like to illuminate insertion of empty element with < clear:both >, although it makes perfect sense to insert such styled empty element to fix the flow so that it will wrap the < img > as well. But I wonder if there is another method available. It just feels redundant. Ok, Normally I have no problem centering divs, but somehow I cannot get this to work. I have the following code: PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <style> .img-shadow { float:left; background: url(shadowAlpha.png) no-repeat bottom right !important; background: url(shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; } .img-shadow img { display: block; position: relative; background-color: #fff; border: 1px solid #a9a9a9; margin: -6px 6px 6px -6px; padding: 4px; } </style> </head> <body> <table width="800" border="1"> <tr> <td> <div class="img-shadow"> <img src="image.jpg" alt="test"/> </div> </td> <td> <div class="img-shadow"> <img src="image.jpg" alt="test"/> </div> </td> <td> <div class="img-shadow"> <img src="image.jpg" alt="test"/> </div> </td> </tr> </table> </body> </html> It creates a CSS dropshadow and border around the image. That is working perfectly, but on my thumbspage I'd like to have three per row, neatly centered within the table cell. Because of the float:left; it won't center. Obviously removing the float:left; will mess up the drop shadow, so I am looking for another solution. Wrapping it in another div and center it, won't work as well. I am probably overlooking the obvious here, but I cannot see it. Can someone help me out here? Cheers, Ronald I have #sidebar on my website and within the sidebar which contains two smaller divs (Calender and Archive) inside it which are styled by #sidebar div When I put these two divs in, Calender wasn't where I wanted it to be, at the very top of the sidebar. It was a few pixels lower. To fix I went to #sidebar div and changed the top margin to -1px and now it's at the very top. Is this a sensible fix? I've checked in Chrome 2.0, Safari 4.0, Firefox 3.5 and IE 8 and it looks to be OK but there's a nagging feeling in my head that I shouldn't have needed to do this. Here is the 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div id="header">Content for id "header" Goes Here</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</div>
<div id="content">jkjk</div>
<div id="sidebar">
<div id="calender"><h3>Calender</h3>
<p>fjkfjdklfjkljfsk</p></div>
<div id="active"><h3>Archive</h3>
<p>fjdkfjkfjk</p></div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>
And here is the main.css: Code: @charset "utf-8";
/* Main style */
body { padding: 0; margin: 0; background-color: #000; text-align: center; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
.wrapper {
text-align: left;
margin: 0 auto;
width: 750px;
}
/* Header */
#header {
background-color: #996666;
margin-top: 35px;
margin-bottom: 5px;
height: 90px;
padding: 0;
border: solid 1px #F00;
}
/* Nav Bar */
div#navcontainer {
background-color: #996666;
border: 1px solid #F00;
margin-bottom: 5px;
}
div#navcontainer ul {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000;
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;
}
div#navcontainer ul li {
display: inline;
margin-left: -4px;
}
div#navcontainer ul li a
{
padding: 5px 10px 5px 10px;
color: #000;
text-decoration: none;
}
div#navcontainer ul li a:hover
{
color: #FFF;
}
#active a {
}
/* Main Content */
#content {
background-color: #996666;
float: right;
width: 500px;
border: 1px solid #F00;
margin-bottom: 5px;
}
/* Sidebar Styles */
#sidebar {
background-color: #996666;
float: left;
width: 243px;
border: 1px solid #F00;
}
/* The Divs that house Calender and Archive */
#sidebar div {
background-color: #800040;
}
/* The 'Calender' and 'Archive' text */
#sidebar div h3 {
background-color: #FF0;
font-size: 85%;
text-align: center;
text-decoration: underline;
margin-top: -1px; /* Remove this line and the calender 'box' should drop a few pixels from the top */
}
/* Footer */
#footer {
background-color: #996666;
border: 1px solid #f00;
clear: both;
padding: 0;
margin: 0;
}
If someone could take a look that would be great. I've commented it up for you so you should be able to find the divs easily. The code has been verified. I'm not a great web designer by any stretch of the imagination. I'm learning as I go along so hopefully someone with more knowledge can help me out. Set margin:0px; So the typical reason that I see people's images disappearing on hover has something to do with repositioning and substituting new images, etc. My case is that my hover code changes the opacity, that's it, and only to about .4 at the very very most. My solution works when slowly mousing over the image, however rapidly hovering/leaving the image causes the image do disappear for a period of time, as though the browser is re-requesting the image. Maybe that's the case? I'm not an expert on CSS. I can't seem to include a link due to some "akismetspam" phrase not being found? I've been wanting to solve a table problem I've had for a long time. I want a scrollable table without needing to specify specific px widths for the headers and the table cells. I've been told there is no solution to this. What I've done is duplicate the table. I create a div, give absolute positioning to both tables, show the headers of table1 then use visibility:hidden height:0.01em on subsequent rows. I position the duplicate table - table2 1.8em (1 row) below table1. (I think something could be done with z-index too, and if someone wants to demonstrate I'd be happy to see it). This table has the same data, but skips the headers. Some work is also done to make room for the scrollbar. Here's a sample: http://restoredirect.com/test.html You'll notice I'm close, but just a little off. Can someone help me to get it right? While not ideal, I think this may help many people. Also, if someone does have a more ideal approach please speak up and let me know! I have googled it and searched through this forum as well. And found pretty much the same advice. However it does not appear to work for me. My CSS file has the following: Code:
body {
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #000000;
font-size: 12px;
line-height: 15px;
text-align: center;
}
.largeLink{
font-size: 14px;
}
.bodyTextSm{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;}
div#pageContainer{
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
...
and my php file contains: Code:
<body bgcolor="#000000" onLoad="MM_preloadImages('/images/TopNav_r1_c1_f2_online_movies.gif','/images/TopNav_r2_c3_f2_online_movies.gif','/images/TopNav_r2_c4_f2_online_movies.gif','/images/TopNav_r2_c5_f2_online_movies.gif','/images/TopNav_r2_c6_f2_online_movies.gif')">
<?php include_once("GoogleAnalytics.php") ?>
<!--The following section is an HTML table which reassembles the sliced image in a browser.-->
<!--Copy the table section including the opening and closing table tags, and paste the data where-->
<!--you want the reassembled image to appear in the destination document. -->
<div id="pageContainer">
...
And I am not getting the page to center. What gives? heys all, in FF, I can get rid of that dreaded link outline via a { outline: none; } but IE7 isn't obeying. Funny enough, it's buggy, sometimes the outline is there, othertimes not. Does anyone know a sure-fire way to fix this issue, hopefully not resorting to apply this.blur() to all the links? Thanks. figured it out. don't know how to delete |
|||||||