I have a site I made really fast that uses floats to display different sections of content. The floated content and the content that has an additional margin both appear fine in FF/IE, but on safari one of the divs is completely hidden. I've tried switching to padding and position:relative, but nothing has worked for me. If I take out the code to display it to the right it shows up again but under the floated content.
The main section of css that seems to be causing the problem is:
#settings{
float:left;
}
#right_content{
margin-top:20px;
margin-left:440px;
width:400px;
}
This gives me the same result whether I specify a size to the #settings div or not. Any ideas would be appreciated.
The site is available at: http://frickinsweet.com/tools/Theme.mvc.aspx to see the source code.
I believe the error lies in the mark up that the color picker is generating. I saved the page and removed that code for the color picker and it renders fine in IE/FF/SF.
Have you tried floating the #right_content div to the right?
#right_content{
float: right;
margin-top: 20px;
width: 400px;
}
Sorry I should have mentioned that as well. I tried floating that content right and additionally tried floating it left and setting the position with the thinking that both divs would start out at left:0 where setting the margin of the right would move it over.
Thanks
A few things you should fix beforehand:
Your <style> tag is in <body>, when it belongs in <head>
You have a typo "realtive" in one of your inline styles:
<a href="http://feeds.feedburner.com/ryanlanciaux" style="position:realtive; top:-6px;">
Try to get your page to validate; this should make debugging the actual problems far easier.
Related
I'm having issues trying to get my main container (the white background) to stretch to the bottom of the content, it currently runs in the header only. I've been racking my brains for ages, I've tried adding in a clear and also made sure that all the containers within the main container are floated but still no joy.
This is a live website and can be viewed at http://www.ridermagazine.co.uk
I've also noticed that my sidebar has dropped down below the content instead of displaying on the right-hand side, this lead me to believe that I had gotten my maths wrong but I've double checked everything and nothing seems to be out of place.
Any help would be awesome.
Thanks.
CSS code for container:
#page-wrap {
width: 926px;
margin: 20px auto;
background-color:#fff;
padding:17px;
}
The problem lies in using all the float:left directives. You don't need them if all the elements which are block elements are block elements. For example the h1 element in header is NOT a block element. It seems that somewhere is a h1 {display: inline} - e.g globally. If you overwrite this in the inspector of your browser to h1 {display: block} the white background "is growing" ;-). So my tip: remove all the float directives and start again with composing.
Remember: float is evil ;-)
Just use it if you really need to. For example if you need two main div elements live next to each other. Also instead think about using overflow ....
EDIT: the error is in div id="content". Remove float:left and it works
That's what I mean with evil float elements ;-)
Try to add:
<div class="clear"></div>
at the end of your "page-wrap" div.
A more accurate answer is
<div style="clear:both"></div>
as he did not mention if he has a class called clear
"at the end of your "page-wrap" div."
I have a problem with CSS float handling in IE9.Look at partycypacjaobywatelska.pl. In Firefox, Chrome, Opera etc. main page is displayed correctly whereas IE9 shows a white space between the header and the rest of content.
This space is triggered by two elements of classes left and right (their place in DOM: body -> #wrapper -> #container -> .left, .right). They have float: left and float: right set, respectively but, nonetheless, in IE9 they push the .middle div down. Setting display: none on them helps but I don't fully control when those divs gain content so it's not a feasible solution to me.
I tried to create a minimal example but this jsFiddle works fine in IE9. Any idea what might trigger the bug?
Thanks for help in advance.
Using IE's dev tools, .middle actually isn't being pushed, it's the .jimgMenu inside of it. If you remove the overflow: hidden on that, then you can see IE9 and Firefox behave the same. It's definitely the floats shifting the content area. Have you tried a clearfix instead of using the overflow?
Honestly, those .left and .right should probably be positioned absolutely if they are stuck to the sides like that though. What do they even contain? Why are they suppose to be floating behind the content? It's probably not the best way to structure the HTML.
I have this code, which is behaving differently in firefox vs chrome.
<h2>Presenting
<span style="font-weight:bold">Analytics by </span>
<div class="fi_logo"><img src="IMAGEURL" /></div>
</h2>
the class fi_logo referenced above is :
.fi_logo {
min-width: 35px;
height: 35px;
margin-left: 40px;
position: absolute;
top:-5px;
left: 262px;
float:right;
}
In firefox, there is an offset caused by margin-left in fi_logo between the image and the text(in h2). If i dont add the margin-left, then the image overlaps the text in chrome.
So, in short, if i add the margin-left property, it works in chrome, whereas it causes a large offset in firefox. Any suggestions on how to solve this?
Here it is: http://jsfiddle.net/bikerabhinav/mpL79/2/
Use combination of position relative and absolute.
Also, do not use div inside h2 - bad markup
Maybe if you set .fi_logo display:block
I think, your problem is with specific browser version.
I checked it in FF 3.6.2, which return same result like Chrome
Well it sounds like you still haven't sorted this out so I will make a little more commentary.
I cannot say exactly what is causing the browser inconsistencies without doing a bunch of trial and error, but I think that the way to fix it is to rethink the way you are positioning the image.
It seems awful convoluted to be positioning the img absolutely, floating it, and adding a left margin. Given all of that it is unclear what precisely you are even trying to accomplish with this code.
If you edit your question to describe how you want the image positioned, I (or someone else) would be more than happy to recommend a good approach
Your html is invalid. You cannot have a div inside a heading. I also question the float and absolute positioning on the same element. I also wonder if you are using a doctype.
Your image tag inside the div is not closed properly, and in the css the class definition is wrong; the class is defined by a dot (.);
Ok, I'm stumped!
If anyone has a suggestion or two on a CSS / JavaScript fix for an IE7 z-index issue on this page without changing the DOM structure much (it's set up for easy tab usage) I'd be incredibly happy to try it out.
On this page, IE7 renders the bar that spans 100% of the width of the page above everything else, while I actually need to cram it very specifically between the text and the hero image (as seen when viewed on any modern browser).
Here's the link.
Thanks.
IE7 has known bugs with z-index, see: IE7 Z-Index issue - Context Menu
In this specific instance, you can fix it by changing a few parts of your CSS. Complete each step and check the progress as you go:
On #container remove position:relative .
The z-index issue is now fixed, but everything is in the wrong position!
On #thumbnails and .pane_img remove these properties: position, top, left, z-index.
On .pane_content, set left:50%; margin-left:-480px; bottom:90px.
On #learn_more_btn and .renova_logo, repeat the left: 50%; margin-left: ??px method to place the elements back where they should be.
I'm having a problem with this page.
The .blog-footer div needs to clear on the right to correct for the height of the pictures introducing clear:right; causes the huge gap to appear on the page in FF and IE.
I'm at a loss, I've tried numerous ideas to get around the problem and at this point I've been staring at it too long to see the problem clearly. Can anyone help me out.
Thanks in advance.
Try using positioning. Add these to get you started:
#page-body {position: relative; width: 740px; margin-left: 20px;}
#sidebar {position: absolute; right:-190px;}
There are some subtleties, like getting the right behaviour when the content as a whole is not long enough to push the footer down, but I find those easier to work out than floating problems. With a fixed height footer like yours, that is easy to fix using a bottom margin on the page body and some more absolute positioning for the footer. You have gobs and gobs of extra divs to play with.
The clear attribute works relative to floating elements. So you can use it to make sure the footer closes the div below the picture, but the fact that your sidebar is floating as well actually pushes things down to the bottom of the sidebar.
So, as #Nicholas Wilson proposes, one solution is to position your sidebar using means other than float. And your layout doesn't appear to really require float for the sidebar.
In another direction, I noticed that you are currently hardcoding the heights of your pictures. Since you know these heights, another possibility is to forget about the clear:right for blog-footer , and add a min-height attribute to the asset-body, as in (this is for the beer festival)
<div class="asset-body" style="min-height:184px;">
Certainly not elegant or DRY, but if you had to you could do this or have javascript do it.