|
CSS - Clearfix Not Fixing In Ie :(
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 Similar TutorialsIf 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 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? Hello, I have a cool jquery rollover script. But I have a problem with the CSS. The CSS for the script has an IMG tag to line the images up correctly. However, when I add the the script and it's CSS to my website, the IMG tag tells ALL images on website to go to the top left corner, and not stay where I originally placed them. Is there a way to modify the IMG tag in the script's CSS so that it only applies to the images in the script and not to affect the other images on my webpage? Here is my code: Code:
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
$(function() {
$('.blocks').hover(function() {
$(this).children('.front').stop().animate({ "top" : '300px'}, 700);
}, function() {
$(this).children('.front').stop().animate({ "top" : '0'}, 400);
});
});
</script>
<style type="text/css">
#three {
width: 850px;
text-align: center;
margin: auto;
}
.blocks {
width: 250px;
height: 140px;
position: relative;
overflow: hidden;
float: left;
padding: 0 1em;
}
img {
position: absolute;
top: 0; left: 0;
}
</style>
</head>
<body>
<div id="three">
<a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/></a>
</div>
<p><a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/> </a>
<a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/></a>
</div>
</div>
</body>
</html>
Thanks for listening! Ok, I have been working now for 2 days on a new testsite. Its far from done but I need someone with a fresh look to help me fix and optimize some things * The top menu is supposed to be white -->.vise in the css, but is not....I am missing something. * The bullets in the two right boxes dont appear in FF but do appear correctly in IE ?! Anything else ya see, let me know. I am very apreciate for help URL = http://www.serbia-today.com/test/testindex.php hello forum, I am having problem in fixing my <div> position.The div become visible by an event.plz help me . Regards. Site here css here IE looks good, but FF is a little messed up... The horizontal nav should be directly below the "header banner", and the vertical nav should be directly below that on the left... FF has quite a bit of overlapping... Also, with the horizontal nav... how would I change it so that it doesn't start until after the width of the vertical nav, but had a background (with a matching border) instead of just white space, and a spreading background on the right (with a matching border)... Thanks Bryan I am a web designer, taking on the challenges of some front-end coding. I'm fairly proficient with tables and HTML code, but I am trying a new web site using div layout and heavy CSS. http://neovistaproj.pangin.net Can someone take a look at this code, and provide some insight? I would really appreciate it. Some known issues: 1) the background has a gradient and a dropshadow combination. you can see that it isnt behaving properly, along the right edge. the gradients do not match up, but i know this isnt because the images were cut wrong. it is behaving weird, the way i have the bg and the images overlying it each other. 2) at the bottom, i have a repeating bg image so that the text can be as long as necessary, and still have the proper white bg, with border, and dropshadow. i had to jimmy-rig it a little, and chop my content well into two sections. its a pretty bad solution. any ideas? i will gladly provide any of the source files, for assistance, and will most likely compensate the individual who can provide me a workable template, for this design. THANK YOU! Hi There, I have deisgned a site using css layouts and have built it. It looks exactly how I want it to in Firefox and other browsers that have proper CSS support. I am unsure what I need to do to 'fix' the ie bugs. Can anyone give me any pointers? the test page is he http://www.storesprite.org/layouts/ Thanks Hey guys. I'm having a few issues with CSS flaots and this one seems to be dominant no matter what I try. What I have tried is setting the min-width of a parent div so that when the users resizes the page smaller than 40em(font sizes i think) they start to get horizontal scrolling. Where it happens. There is about 10 colored blocks for changing the colors and also there is a gear with the word networking next to it(or underneath it) What I want to happen. Instead of the colored blocks going underneath each other when the site is resized I want them to stay where they are. I thought setting the parent div(also floated) with min-width:40em; would work. Also I'd like the word networking to not apear underneath the gear. Same issue as the colored blocks. I can't figure out what I'm looking for in google and anything I came up with used position absolute and I don't think that's gona work here. http://142.177.157.241:8080/portfolio4/ http://lovemeforme.org if you notice, right under the main image, you will see the two purple boxes (under the header and above the content and sidebar).. I don't know how to get rid of them. It has to do with the content and sidebar div's, because when I take out the background color it goes away, but... I can't figure out what to do, i've tried everything. Thanks in advance howdy, i've been workin on a site using some good CSS for the first time. i usually get fed up but it seems to be working pretty well this time. i have one little problem http://www.bnymusic.com/lairsite/ when i check it in firefox, safari and IE on mac there's a little offset between the text area and the main image.... any clue on what is happening and how to fix it? also noticed that in IE on pc the hover over Home doesn't extend into the padded area....but it works sometimes...crazy hopefully this ls small and i will continue to convert to CSS...sadly my photo area stumped me on the CSS and i used a table....oh well. prethanks, B Hi I don't know if this is a CSS issue, but how do you allow limit the movement of web pages when you drag IE window. So if its fixed it can be structured so that it can be seen by users who have a resolution of 800 X 600. And if its not fixed, then the page is stretched when you enlarge the window. Cheers Here's the code in question I've attached the background image with the following CSS: Code: body {
background: #DDF19A url("/iris.new/images/bgIris-Blur-green-light.jpg") bottom left fixed no-repeat;
}
It works as expected in IE, but Firefox tends to lag a little bit when you're scrolling, and then snap into place. Same with NN, but Opera 8 is fine. Any thoughts on this? MPEDrummer I was wondering whether there is someway to fix the area of a content in CSS so that it wont expand if too much text was entered, just similar to the html code that fixes the area of the table. i.e. Code: <table style="table-layout: fixed;"> This code lets the table stay in a fixed size no matter how much text is entered... On my website lakelandedc.com the Side bar is very weird in the way tat if you go down from one topic to the other it snaps back and you lose your place for what you tried to click on. how can i fix this menu or make a new one that will b more user friendly? Hi. I need 4 images to be fixed permanently in the corners of the page. I've found some code which half suits me, the upper images are fixed. But the left bottom one is not, and the right bottom one is on a "lower layer" than the text, and it's not acceptable. Could I get the lower images fixed just as the upper ones? or better yet make the text flow "under" the images? Supposing this kind of menu is preserved. http://testingspace.110mb.com/test.htm will some one guide me how I can make the image attached in col2 to be fixed one and should not scroll down though the text in the col1 may scroll down. I have used the following css code. html, body { margin:0; padding:0; border:0; } body { background:#fff url(bg.jpg) center repeat-y; } #container { max-width: 900px; margin: 0 auto; width: 80%; } #col1 { width: 48%; float: left; } #col2 { width: 48%; float: right; } #footer { clear: both; background:#fff; padding:0.75em; } The background is fixed in a wrapper div using background-attachment: fixed. When I place a fixed footer div in the wrapper using position: fixed, the background disappears. If I place the footer outside the wrapper, it appears outside and disconnected from the rest of the content. How do I fix the footer at the bottom without losing the background? Help, please! Hi, I'm new to CSS (and Javascript) and am wondering how to fix a <div> overflow on my site (www.logicland.co.uk). here is my CSS code: Quote: /* Font CSS */ body { font-family: Arial, Helvetica, sans-serif; } #footer { font-size: 11px; } /* Layout CSS */ body { padding: 0px; margin: 0px; background-color: #D0DFEF; } #container { margin: 10px; border: 1px solid white; background-color: #6699FF; } #header { padding: 1px 7px 1px 7px; border-bottom: 1px solid white; height: 60px; background-color: #6C86DC; } #columnA { width: 150px; position: relative; float: left; padding: 5px; } #columnB { margin-left: 160px; margin-right: 160px; padding: 10px; border-left: 1px solid white; border-right: 1px solid white; background-color: #CCD5F2; } #columnC { width: 150px; position: relative; float: right; padding: 5px; } #footer { padding: 1px 3px 1px 3px; border-top: 1px solid white; text-align: right; background-color: #DDE3FF; } Is there simply a property I can change to cause the right <div> to push the footer down like the middle column does. Any info would be great. Cheers, BuckRogers01 |
|||||||