|
CSS - First-child Delima. Solution?
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! Similar TutorialsI'm basically asking the same question as this post, but hoping that I can press for a better solution. I have an element which contains an image and some text, and I need that element to expand to the width of the image, not the text. The size of the image will change, so I can't set a fixed width on the containing element. The code I have which doesn't work looks like this: Code: <html> <head> </head> <body> <span style="display: inline-block; border: 1px solid black"> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio.</div> </span> </body> </html> The solution proposed in the post I linked to looks like this: Code: <html> <head> </head> <body> <table width="1"> <tr> <td> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio. </td> </tr> </table> </body> </html> The second example gives me the functionality I'm looking for, but I would really like to avoid using tables. I'm hoping there is a CSS solution to this. Thanks. Just like the title says, the child is wider than the parent, and i want it automatically centered, so t hat the centers of both divs are inline with each other. I tried the Code: margin 0px auto; which works if the child is smaller, but it doesn't seem to work in this case, any other ideas? 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? 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. 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. 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;
}
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? 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 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 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. Set margin:0px; 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. 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? 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! 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? 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. How do I distinguish <li> that have child from the one that does not in an unordered list, using CSS? Is there any way to change the background image of an element that is inside the current one? Kinda like this.child.style.backgroundImage = ""? Not sure if this would be more of a javascript question, if so sorry. I have an a tag with an ID and I want to change the background position of the child element which is an input button Code: <a href="javascript:;" id="buttonLeft" class="fromButtInput" onMouseOver="buttHover(this)" onMouseOut="buttOff(this)" > <input type="submit" id="buttonRight" value="Submit" border="0" /> </a> The "buttHover(this)" offsets the background image of the a tag. I can't figure out how to target the <input> inside without affecting all the other buttons. I have the following code: Code: <div class="Outer"> <div class="Inner"> Text one </div> </div> <div class="Outer"> <div class="Inner"> Text two </div> </div> I have the following CSS Code:
.Outer{
width:150px;
float:left;
}
.Inner{
Margin:10px:
}
I would like to set the Inner div in first instance of Outer to have a margin-left of 0px. I have tried the following Code: .Outer:first-child .Inner{
margin-left:0px;
}
This works in Chrome but not in IE, but it does work if I apply the style inline to the First Inner Div. Can it be done within the CSS file? I wrote a little div based expandable tree but am having trouble setting some of the conditional styling when a div has children. What I'd like, is that when a div has children, the "font-weight" should be set to bold. Ideally, I'd also like to use the "div:after" property to append a '>' indicating that the div has children, but that's not critical. I tried the following but it didn't work right: Code:
/* Styles the child, not the parent */
div.tnode > .tnode {
display: none;
font-weight: bold;
}
/* Doesn't do anything */
div.tnode:after > .tnode {
content: '>';
}
And here's the basic css with html Code:
<html>
<head>
<style>
/* Node container styles */
div.tcontainer {
width: auto;
height: auto;
font-family: Lucida Grande, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
font-size: 12;
color: black;
padding: 5 5 5 30;
}
/* Node styles */
div.tnode {
display: inherit;
padding: inherit;
}
div.tnode:hover {
cursor: pointer;
}
/* Node child styles */
div.tnode > .tnode {
display: none;
font-weight: bold;
}
div.tnode:hover > .tnode {
display: block;
}
/* doesn't work
div.tnode:after > .tnode {
content: '>';
}
*/
</style>
</head>
<body>
<div class='tcontainer'>
<div class='tnode'>North America
<div class='tnode'>USA
<div class='tnode'><img src='http://images.infoplease.com/images/states_imgmap.gif' /></div>
<div class='tnode'>States/Provences</div>
</div>
<div class='tnode'>Canada
<div class='tnode'><img src='http://www.infoplease.com/images/mapcanada.gif' /></div>
<div class='tnode'>States/Provences</div>
</div>
<div class='tnode'>Mexico
<div class='tnode'><img src='http://www.infoplease.com/images/mmexico.gif' /></div>
<div class='tnode'>States/Provences</div>
</div>
</div>
</div>
</body>
</html>
Any help appreciated Thanks Ken |
|||||||