|
CSS - Clearfix Causing Problems With Round Corners
Hi guys,
I've applied a clearfix to contain two floating elements (the checkbox and submit button - see below), unfortunately, this doesn't seem to work too well with the rounded corners technique I'm using. Before adding floating elements and clearfix http://www.soapshoe.co.uk/testa.php After adding floating elements and clearfix http://www.soapshoe.co.uk/test.php Anyone got any advice on what's going wrong? Similar TutorialsPlease take a look at this mumbo jumbo example: Testing page The objective is to adjust the images of the four round corners of a content rectangle. Now the problem is that the two bottom round corners are not showing properly in Firefox 1.0. They bleed outside the rectangle towards the bottom, with a few pixels. And no matter what I change or try, it won't work. Second, the corners don't look even close to right in Internet Explorer 6.0. Do you have any idea how to correct this thing? Thanks a lot for anyone taking the time to help and give tips. Hi to all, I have a problem with an empty div. I have created an empty div as follows: Code: <div id="more"></div>Hello Now I set the height property of the empty div equals to 20px. On IE 7.0 it looks fine, with the hello under the empty div, however in FireFox and Opera Hello is being display nearly inside the empty div. What can i do to fix this and make it display always under the empty div? Thanks and Regards, Sim085 ps: I am using the Strick Doc Type. and I need the empty only to colour it in a different colour (for style that is). I am creating a CMS system that will be implementing nested drop down menus. It being a CMS, the clients will be able to adjust what menu items are to be displayed. Hopefully, I can explain my problem here clearly. The drop down menu works as follows. When a user moves his mouse over the menu item, the menu item is highlighted and the children of that menu item are displayed. Then if the mouse is moved over one of the children, the child menu item is highlighted and any children of that menu item are displayed, etc. To do the highlighting I am using Javascript to change the element's class from 'menuitem' to 'menuitem_highlighted' using onMouseOver and onMouseOut. Now to my problem: I want to use <a> tags for the menu items on the menu, not just onClicks. So I have used CSS to assign a class definition to 'menuitem a' and 'menuitem_highlighted a' Now this works fine for the top level menu, however, when you get to the nested menus, CSS causes all of the children <a> tags to use the 'menuitem_highlighted a' class even when the mouse is not over top of them. A simplied example of the problem that I have run into is this: Code:
<!--- CSS --->
.tableinfo {
width: 200px;
padding: 0px;
margin: 0px;
}
.tableinfo .menuitem {
background-color:#666666;
color:#FFFFFF;
text-align:left;
border: 1px solid #FF0000;
}
.tableinfo .menuitem a {
color:#FFFFFF;
text-decoration:none;
}
.tableinfo .menuitem_highlighted {
background-color:#FFFFFF;
color:#666666;
text-align:left;
border: 1px solid #FF0000;
}
.tableinfo .menuitem_highlighted a {
color:#666666;
}
Code:
<!--- HTML --->
<table class="tableinfo">
<tr>
<td class="menuitem_highlighted">
<a href="index.html">Text</a>
<table class="tableinfo">
<tr>
<td class="menuitem">
<a href="index.html">Text</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
In the example, I expect the first link to use the 'menuitem_highlighted a' class, however, I was hoping that the second would use the 'menuitem a' class, but no such luck. If you need any further informatoin, please let me know. Thanks for your help! Mitchell Killian (II Cor. 12:9) Integrity Design and Coding http://www.integritydc.net "Except a man be born again, he cannot enter into the kingdom of heaven." John 3:3 Hey all I'm not very experienced with this. I'm having some troubles with floating divs. The page is here And the css is here The problem is that when I resize the window on IE6/win the divs on the main column fall down to the bottom of the page. Really apreciate your help. Marcello If you you go to the above link, you will notice that in the sidebar (#sidebar), the backgroundcolor where the text is does not follow through until the end, instead it shows the background color of the #wrap. I thought the clearfix:after would fix it, but it didn't. I took out the coding for the clearfix: after for now. Can anyone help me with this? Here's the page: http://www.javashack.net/hatj/2yrolds2.html Now, the black border around the center content area is inconsistent on IE only. On the other 3 browsers, it shows properly. When viewed on IE, the border (of the content area) has breaks in it as soon as you try to scroll up and down the page. Also, as I add more divs in the content area (#horsebox), the border changes from being at a margin-left of 190px, to having a margin-left of 0px. The content stays where it is supposed to be. I can't really figure out why, but I'm sure it has something to do with my use of the .clearfix. I'm still tinkering with it to try to figure it out, but I'd appreciate any help along! TIA Javashackgirl I am developing an information page for my company. I make a round tab using css, see www.julycenter.com (the tab they use for state name, eg. CA, FL etc.) Following is what I use (borrow) to create the tabs. .nav A { -moz-border-radius: 0.7em 0.7em 0 0; border-top: 2px #ccc solid; border-left: 2px #ccc solid; border-right: 2px #ccc solid; line-height: 2em; white-space: nowrap; } It works quite well and nice display on Firefox, but the round tab become rectangle on IE (and other browsers). It also displays incorrectly on that site julycenter does anyone know what I should do to make it consistent across browser? Hi all, I am trying to find a code for a CSS for Dreamweaver in order to create a round table Do you now sth? Hi, I have a popup span within links, giving extra information. Ideally I wish to specify it as position fixed for non-IE5 and 6 browsers, but (because IE can't handle it, make it position absolute for them instead. This is easy with PHP and works fine. But I am also offering it in code for others to use as syndicated content, so for them, PHP is not necessarily possible. If I have position:fixed; left:10px;top:10px in my general style sheet then I cannot use position:absolute afterwards in a style for IE within conditional IE tags. because 'position:absolute; does not over-ride 'position-fixed' for IE, even if it is lower down the page. I can think of no way of hiding 'position absolute' from IE. And it does not help to put, in the IE-only style, anything like position:absolute;top:none;left:none to try to cancel out the effects of the general style sheet. Is there any work-around for somehow hiding or cancelling the position:fixed CSS, for IE, so that it will respond to position:absolute instead. many thanks Tony I am trying to put a image as the background of a menu and when I place it as the background of the <ul>, the corners of the box show? how do I manipulate it so that the corners of the <ul> or <div> do not show with a round image? Thanks! Hi, I have 5 images to display in my rounded corner. It works fine but i can't resize the whole image below 350px in height.The width seems fine for what i want about 140px. The height sizes of the side,trc,brc image are all 120 px each and total 360px. If I set the height to below 350 then i get the bottom chopped off with squarish corners. Why can't this image resize itself because i specify in % size? Code:
div#t3 {
height:350px;
background: url(../images/tlc.jpg) top left no-repeat;
color: black;
width: 100%;
}
div#tr {
height:10%;
background: url(../images/trc.jpg) top right no-repeat;
}
div#mr{
height: 80%;
height: 100px%;
background: url(../images/side.jpg) top right repeat-y;
}
div#ft {
height:10%;
background: url(../images/blc.jpg) bottom left no-repeat;
}
div#ft2{
height:100%;
height:50px;
background: url(../images/brc.jpg) bottom right no-repeat;
}
//html
<div id="t3">
<div id="tr">
</div>
<div id="mr">
gdfgdg<br>fsdfds<br>asdasdasdasdasdasd
</div>
<div id="ft">
<div id="ft2">
</div>
</div>
</div>
Hi, Does anyone know of a way to do the effect of rounding corners (see attached image) in CSS? As you'll see in the image, I just want 1 pixel to be offset and be in a different colour for each corner of my box. Thanks for reading my question Here is the link to the two pages in question. http://www.pierced.ca/Kelly/cardsRound.htm http://www.pierced.ca/Kelly/indexRound.htm I know my images for the rounded corners aren't round, that's not the problem. My problem is the positioning of the images. When I view the pages using IE, the "Menu" images line up perfectly, and it's just the bl.jpg and br.jpg images on the "Info" section that don't. When I view the pages using FireFox, the bl.jpg and br.jpg images on the "Menu" section are off. Any words of wisdom to get both to work? Thanks again, Brad What is the best way to make your element corners rounded with CSS? I'm kind of looking for a good tutorial. I have copied this tutorial, but my divs are not showing rounded, but still square. http://www.sitepoint.com/article/ro...-css-javascript Tut link Can anyone see what I've done wrong? I have attached a screenshot as the webpage is located on a protected server. The header is what I'm trying to make round. I have stroked it in black to show you My html: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test Rounded Div</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container" align="center">
<div class="header">
<div> <!-- upper left corner-->
<div> <!-- bottom right-->
<div> <!-- bottom left -->
Header
</div>
</div>
</div>
</div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
My CSS: Code:
div.header {
width: 200px;
background: #4095BF url(img/blue_top_rt.gif) no-repeat top right;
}
div.header div {
background: transparent url(img/blue_top_left.gif) no-repeat top left;
}
div.header div div {
background: transparent url(img/blue_bottom_rt.gif) no-repeat bottom right;
}
div.header div div div {
background: transparent url(img/blue_bottom_lt.gif) no-repeat bottom left;
padding: 15px;
}
I was looking for the best way to implement rounded corners for my website and its been difficult evaluating the different methods and deciding which way is the best way to go. So far the mountaintop method looks the most promising. The idea is to create a transpatent gif with the corners of the image as a white mountain shape. When you make this the background of the CSS div, the color of the background offsets and creates the image of rounded corners. I am having a small issue implementing that as well, for example, ive created two images one for the top and one for the bottom, but I am not quite sure how to implement it as you cannot specify two background images per CSS div. Anyone have any thoughts on this? Greetings, I have perhaps a strange problem. I am trying to use CSS to generate a border around .PNG images. My border consists of png images as well. For the border, I want rounded corners, which take seperate images, and then a middle image that repeats to fill in the space. My problem is that the middle image is repeating over the corner images. You can see it he http://www.3dbrewer.com/ Notice the borders around the random images at the top. It is going over the corners. The reason I have to do it this way is that the images vary in size. Here is the code I am currently using: Code:
.pb div {
background: url(../images/picture-tl.png) 0 0 no-repeat;
}
.pb div div {
background: url(../images/picture-tr.png) 100% 0 no-repeat;
}
.pb div div div {
background:transparent url(../images/picture-t.png) 0 0 repeat-x;
padding:13px 0px 0px 0px;
}
.pb div div div div {
background:url(../images/picture-l.png) repeat-y scroll left;
padding:0px 0px 0px 13px;
}
.pb div div div div div {
background:transparent url(../images/picture-r.png) repeat-y scroll right;
padding:0px 13px 0px 0px;
}
.pb div div div div div div {
background:transparent url(../images/picture-b.png) repeat-x scroll bottom;
padding:0px 0px 13px 0px;
}
I plan on putting corners on the bottom too of course, but one step at a time. Any help would be appreciated One problem I've had so far with CSS, is that I haven't found a good way to display rounded corners or anything that would change the perfect rectangle of a div. Previously, using tables, I would just set up a 9x9 table with a repeating background on the top bottom and sides, then an image in each corner. That allowed me a lot of flexibility. Is there some sort of equivalent to this in CSS, or a way of getting around it? I am writing in hopes someone can help me figure out some problems I am having. All problems occur on the following page: http://cbo4edu.org/newSite/home.html PROBLEM #1 I cannot figure out why Column 3 is positioned outside the wrapper div. I need the solid black border to align with the other borders on the right-hand side. PROBLEM #2 As you can see I am having trouble getting the rounded corner divs to display correctly in the 3rd column. Why are the top-right corners displaying the top-left? Why is the top edge of the lower rounded corner div absent? And why is the bottom-left corner have a blue line under it? I used the method presented he http://kalsey.com/2003/07/rounded_corners_in_css/ PROBLEM #3 I need to add a border between Column 1 & 2 and a border between Column 2 & 3. I have tried adding a border attribute to the CSS file but that does not display anything. Any help on any of these problems are much appreciated. Hi i know there prolly loads around, iv been searching for ages but cant find one that will do the job. I want to create rounded corners in CSS but completely CSS no javascript no images etc. i found one called spiffy corners, it would have been perfect but it was only does complete box color, i only want borders, i wouldnt figure out how to change it to just borders Any one have any ideas? http://www.spiffycorners.com/ |
|||||||