|
CSS - Getting Round Ie Positioning
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 Similar TutorialsI 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? 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 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 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 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? Please 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. I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Hello all! Well I'm just designing my personal website, and I'm encountering a problem with positioning div elements. (This is going to be a very basic question that I couldn't find anywhere.) To understand the exact problem I am having, here are the links: lightblu.com/4/1.html lightblu.com/4/2.html Notice in the first one, it is perfectly fine. In the second, when I add more text, it just overlaps everything, including the footer and the bg color. It only works fine when I add more text on those right boxes. So question is, what should I do so that when I add text either on the left side OR on the right side, the background expands accordingly? Thanks for all your help! Hi all.. I just stumbled onto this site via a google search. I'm having a problem with some "div" work and postitioning of a graphic. I'm working on a site and have decided to do all the positioning via CSS. The positioning shows fine in Firefox but the last portion is shifted down 10 or so pixels in Internet Explorer. Here's a quick show of the error: URL Here's the HTML with CSS below: Code: <div id="Table_01"> <div id="hdr-main_"> <img id="hdr_main" src="images/hdr_main.jpg" width="557" height="161" alt="" /> </div> <div id="hdr-mnu-left_"> <img id="hdr_mnu_left" src="images/hdr_mnu_left.jpg" width="5" height="20" alt="" /> </div> <div id="hdr-mnu-bg_"> <img id="hdr_mnu_bg" src="images/hdr_mnu_bg.jpg" width="547" height="20" alt="" /> </div> <div id="hdr-mnu-right_"> <img id="hdr_mnu_right" src="images/hdr_mnu_right.jpg" width="5" height="20" alt="" /> </div> <div id="hdr-mnu-bottom_"> <img id="hdr_mnu_bottom" src="images/hdr_mnu_bottom.jpg" width="557" height="5" alt="" /> </div> </div> </body> </html> I've also pasted the CSS code: Code: #Table_01 {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
}
#hdr-main_ {
position:absolute;
left:228px;
top:41px;
width:557px;
height:161px;
}
#hdr-mnu-left_ {
position:absolute;
left:228px;
top:202px;
width:5px;
height:20px;
}
#hdr-mnu-bg_ {
position:absolute;
left:233px;
top:202px;
width:547px;
height:20px;
}
#hdr-mnu-right_ {
position:absolute;
left:780px;
top:202px;
width:5px;
height:20px;
}
#hdr-mnu-bottom_ {
position:absolute;
left:228px;
top:222px;
width:557px;
height:5px;
}
Does anyone know why my graphic is turning out the way it is in IE and not in Firefox? This is my first serious attempt at positioning with CSS.. so bear with me Thanks all... Jason G'day all, I am hoping some here can help me with a problem I am having with positioning. I have a content div with dynamically generated text, next I have a side-bar div that i'd ideally like to centre vertically but this seems to be bad practice so my other thought, if possible would be to have the side-bar position itself relative, x position from top with the dynamic text to wrap around the side-bar div. What I have currently is: Code:
<div id="main-content">
<div class="side-bar">
<div class="side-bar_header">Content Header</div>
<div class="side-bar_content">
<ul>
<li>Side-bar info</li>
</ul></div>
</div>
{dynamic_content_tag}
</div>
Code:
#main-content {
height: auto;
width: 630px;
}
.side-bar {
background-color: #CCC;
float: left;
width: 180px;
position: relative;
top: 50%;
margin-right: 10px;
margin-bottom: 20px;
}
.side-bar_header {
background-color: #666;
text-align: center;
padding: 5px;
}
.side-bar_content {
padding-left: 5px;
}
Any help would be much appreciated. Hi, I have the following code: PHP Code: <div id="siteDimention"> <div id="topLeft"></div> <div id="topRight"></div> <div id="latestProjects"></div> <br><br> <div id="additionalBusiness"></div> </div> body { margin: 0px; padding: 0px; } #siteDimention { width: 758px; margin-left: auto; margin-right: auto; padding: 0px; } #topLeft { width: 479px; height: 305px; float: left; background-image: url(../images/main_topLeft.jpg) } #topRight { width: 279px; height: 305px; float: right; background-image: url(../images/main_topRight.jpg) } #latestProjects { width: 758px; height: 185px; background-image: url(../images/main_latestProjects.jpg) } #additionalBusiness { width: 758px; height: 165px; background-image: url(../images/main_additionalBusiness.jpg) } Which if you look he http://www.talktonight.com/test/ .. works fine in IE, but not in Firefox. What am I doing wrong? I am a beginner and I'm having trouble with getting the paragraph elements to behave the way I want them to in the header section of the page at the link below. I have the address paragraph staying in position. The hours paragraph, however, doesn't seem to be contained by the header div. It moves to the left as the browser window is resized to be larger. I tried adding right margin to the address paragraph but the hours paragraph doesn't seem to recognize that either. I know I'm doing something wrong but I can't seem to figure out what. The small weather widget has a similar, but not quite the same, problem. It moves to the right. (openrangeimaging(dot)com/Test/Gravity-Test/index-test01.html) I got an error saying I couldn't include links. I read the forum rules and didn't notice anything about that. Hope I'm not breaking the rules here. I'm hoping someone with css expertise can help me get this set up correctly. >>EDIT<< I was, (by luck), able to achieve what I wanted by adding the position: relative to the #container div. The file in link above has been updated with this change. I am a beginner at css. I aspire to have the most "correct" and cleanest code and conform to best practices. If what I have done is still not best practice and should be done in a different way I definitely want to know how it should be styled. Can anyone comment on if what I have done is proper technique? >>End Edit<< Thanks in advance for any help. remove this topic plss. thanks I have a table with 680px in width & trying to fit my img into the table. I'v tested it both in 1024x768 & 1280x1024. But it just doesn work. When i position it to match my 1024x768, it'll look bad at 1280x1024.. here is my positioning code : img.one{ position:absolute; top:325px; left:550px; } why is that so... http://www.drowninginmytears.org/invalid/ it works in internet explorer, however in firefox, it is i believe 3px off (the main header and navigation), can anyone figure out why? i've been stumped now for hours. thanks my css is: http://www.drowninginmytears.org/invalid/css.css can somebody help me align this UL to the bottom right of this table. i put valign="bottom" and align="right" but it didn't work, i tried to put padding and margins in the CSS to move it over and it just won't work. any help would be greatly appreciated. HTML Code: <table id="products_page" border="0" cellpadding="0" cellspacing="0" width="800"> <tr id="upper_nav" height="198"> <td valign="bottom"> <ul class="navlist"> <li> <a href="index.html">Home</a></li> <li><a href="about_us.html">About Us</a></li> <li><a href="contact_us.html">Contact Us</a></li> <li><a href="contact_us.html">Contact Us</a></li> <li><a href="contact_us.html">Shipping Information</a></li> <li><a href="contact_us.html">Return Policy</a></li> <li style="border-right:none;"><a href="showcart.cfm">ViewCart</a></li> </ul> </td> </tr> </table> Code: .navlist li { font-size: 12px; font-family: Helvetica, Times, serif; display: inline; list-style-type: none; padding: 0px 10px; border-right: 1px solid black; float: left; position: relative; } #upper_nav { background-image:url('http://lonepineprairiepillows.com/Cart/cw3/Assets/cart_images/base_page.jpg'); background-repeat: no-repeat; } Ok. I have a container div in which all of my content for the whole site will be. Inside that I have a header and under it a nav bar on the left. I want to add content to the right of the nav bar but at the same height. If I try to add stuff it goes below. I tried float: left, absolute positioning, and negative margins but none worked since the nav bar then extends over the shrunken conatiner div. Any help on how to make the nav bar and other content side by side would be much appreciated! thanks! CSS is very new to me so if someone can help me with my problem i would very much appreciate it. I am using a background image that is 1024 x 768px. I have positioned this using... Code: body
{
background-color:#000000;
background-image:url('images/homebg.jpg');
background-repeat:no-repeat;
background-position:center top;
}
As i am new to css i am using tables to position my content over the top of the background image. If the browser is adjusted in size the content appears to be going over the edge of the background image instead of staying with in it. is there any way i can lock the 2 (background image and content) in position so that when the browser is made smaller or the site is viewed in different resolutions it will remain together without the content going over the edge of the background. Or am i doing this wrong. I have read about wrappers and such but i don't really understand them. An example of what i am trying to achieve is at www.blue-leaf.co.uk Hi, I can't figure out why my top nav won't stay in place in ie. Here's what I have for my nav. Works everywhere but ie, its position (just the height) it's off. Thanks much for any help. Simone div.navigation { position: relative; left:160px; top: 140px; line-height:0; border : 0 solid #000000; overflow : auto; width : 50%; font-size : 20px; font-weight: bold; margin: 0px 0 0 0px; } div.left { width : 45%; float : left; } div.right { width : 30%; float : right; } a.navigation { border-bottom : 5px solid #99c37f; text-decoration : none; color : #4c2110; font-size: 20px; } a.navigation:hover { border-bottom : 5px solid #99c37f; text-decoration : none; color : #4c2110; font-size: 20px; } |
|||||||