I've had quite a few problems with IE6 and our website.
http://www.sweetlets.com/w/solutions/click-stream/features/
At the very top the teaser boxes have scrollbars in IE6, but not IE7, IE8, FF or Chrome. Does anyone have an explanation for this?
Same effect in the footer with the 3 boxes in one row. Also scrollbars. Mathematically all fits into the row of 960px. I added up paddings, margins, borders and width and even kept some pixels left...
I simply don't know what is wrong. Any ideas?
Not sure if it'll fix it but I'd put a clear: both on #cf_content and remove overflow on the following:
#main
#content
#cf_content
#cf_content_teaser
You can set overflow:hidden; on the #cf_content_teaser to get rid of the scrollbars. Dunno if it's worth investigating further if that resolves the issue. You can apply the same to whatever other div it's happening on.
Related
It seems Chrome is the only browser rendering my code the way I want.
If you notice my position:absolute is changing as the border size increases (in FF and IE) however is unaffected in chrome (which is exactly what I want).
Here is a demo Please try it in chrome/ie/ff to see the difference
The primary purpose of all of this black magic is simple, I need the .thumb:after to always be in the center of .thumb . If you know a better way let me know.
Edit: Fixed -- Checked in FF and Chrome (Don't have newer versions of IE)
http://jsfiddle.net/AyCKU/8/
Took out margin: 0 auto, just left it at using %'s for top and left and negative margins.
Basically: Used one of the methods for Vertical centering in CSS (Using 50% and negative margins) and applied it to both vertical and horizontal centering.
I messed around a little in Chrome + FF and noticed if you change:
.item .thumb:after
If you change the positioning to fixed and center it properly it will work in both browsers.
Give it a shot in IE and let me know if it works ..
I am developing a website which is 100% height and width. There is a panel stuck to the left and the main content area to the right, which is scrollable.
However, in the content area the last div inside is getting cut off. I cannot see why. I have tested this on Firefox and Chrome, both are doing the same.
Here's the link to see it:
removed
As you can see, it is cut off, adding a large margin-bottom (50px +) seems to fix it, but that just looks bad.
PS: Don't worry about the missing images, it's because I've only uploaded this page, not the entire website.
Thanks in advance
Height: 100%; is fairly inconsistent across most browsers. Try to avoid it.
I'm not entirely sure how your layouts usually work, but setting overflow: hidden; on everything in your CSS reset is going to make things wonky from the start.
Take out "overflow: hidden;" and you can see the problem. Your content pane is matching the height of your body, as such, you're losing the height of "topBar" on the bottom of the page. because the Body is hiding the overflow.
Yup -- try overflow:scroll; or overflow:visible; In addition, I'd see if you can make it work without float:right;, 'cos that takes it out of the normal flow of things and can wreak havoc with your box adjustments.
ETA: I think I see the problem; each of your little content divs has floats left and right, which is gonna render margins useless, 'cos as far as the browser is concerned, each box's content is out of the normal flow of the page.
ETA(2): You have overflow:hidden; in your big first rule, where you set default styles for like a hundred different elements. That's your main problem. Change that to overflow:visible; (or whatever you prefer) and set appropriate overflow properties elsewhere and you oughta be good. I was able to mitigate the issue by doing this. There's still tweaking required, but that solves the base problem. I would still get rid of the inline floats, too.
From main-style.css line 5:
overflow:hidden
and main-style.css line 127:
overflow-y:auto
are both causing the page to cut off the bottom. However, when you correct this, it reveals that your wrapper div isn't stretching to 100% of the window height (because the background gradient stops WAY before the page ends), and the content inside your main divs go wonky. These are things that the other posters have discussed being major obstacles in your page formatting correctly.
Please take a look at this JsFiddle here. It is working in Chrome, FF, IE 6-8 and Safari.
Not sure how to fix the 100% height problem yet, but to solve the floated div content problem, make sure you declare a width of 50% on both the left and right-floated content
(also, you can make the right-floated content text-align:right in order to make it REALLY stay to the right of the div).
<div class="centerText messageWrapper">
<div class="messgaeHeader">
<div style="float:left; width:50%">
From: 12345678<br />
</div>
<div style="float:right; width:50%; text-align:right">
Date: 123456789<br />
</div>
</div>
1234567890
</div>
Perhaps someone could chime in with a fix for the 100% height issue this is causing now. I realize this isn't a complete answer, and my solution breaks the page in a different way, but perhaps it will be a jumping off point to you or someone else who may have the solution.
These three SO questions didn't quite get me what I needed, interesting though the BFC layout stuff was. (One, Two, Three)
This fiddle shows the issue I'm having, only in Chrome is the hidden content still enforcing width dimensions of the div classed 'content' with a width value of 0px.
This layout is the basis for an Accordion style menu... which obviously isn't going to work if the enforced content dimensions are visible :P
Why is Chrome behaving this way, maybe I missed something in the BFC explanation? A solution would be awesome.
What a nasty bug!
Need to research if further, but if you know the original width of .content, then you can add the same negative margin to it: http://jsfiddle.net/kizu/cpA3V/7/ — so it would compensate the original width. And if you'll need to animate the accordion, you'll just need to animate the margin alongside the width.
Try with this
.slide {
float:left;
width:25px; /* width added here (same width of '.handle' ) */
}
Example : JSfiddle
If you give the .content a width of 1px, then it behaves correctly. I can't explain what's happening but you can solve this by using display: none instead of the width.
Anyone know why these <li> tags that contain the thumbnail pictures are not stacking up appropriately?
This is blowing my mind away.
http://hqinternetsolutions.com/Websites/NuPhase/index.php?id=4
All the floats, are right, and there's enough width.
Update
I'm using Firefox 6.0
There's nothing strange here - the behaviour is expected.
Most of your lis have a computed height of 58px. However, some of them are slightly different, for example 64px or 57px. The reason for this is that some of the images are a different height.
The best fix is to simply make all the images the same height.
I can't for the live of me figure out how to get one element in my layout to be placed properly in IE 7. You can see the page here:
http://www.iancreates.com/debbie/contact/
Works fine in Firefox, but if you look in IE 7, you'll see the sidebar is beneath the body content. I've tried everything I could think of (floating both divs, changing width and margin/padding to account for IE box model) but to no avail.
Here's the relevant CSS:
.content-left {
width:670px;
height:auto;
margin:0 30px 0 10px;
padding:0;
float:left;
}
.content-right {
width:240px;
height:auto;
margin:0;
padding:0;
float:left;
}
I appreciate the help!
This is a classic IE problem, combined with a slightly impractical page layout.
You have set your peace-main div to have the width 100%, so there is no room for the right content beside it. In standards compliant browsers however, the div doesn't have any height (as it only contains floating elements), so it's not a problem that the right content ends up below it. In IE7 the div is expanded to contain it's content, i.e. the left content div, so it gets a height, and as the right content goes below it, it ends up below the left content also.
Just remove width: 100%; from the peace-main style.
Posting the CSS code would be helpful. Try using "position".
one thing you could do is set your peace-main to float 'left' and only have a width of 700px (so there is enough room for the sidebar)
then the sidebar should also have it's float set to 'right'
but i would actually suggest you try one of these methods :
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
#Guffa's answer is correct in my estimation. I think that your page may have validation errors also that are causing it to be parsed incorrectly. Looking at your markup, it looks like you had wanted div.content-right and div.content-left to be in the same container div, however they aren't, leading the the problem as #Guffa pointed out.
alt text http://i432.photobucket.com/albums/qq48/shiftypowers/source.png
If they were in the same container however, as I think you intended, then this problem would be solved as well. Try and fix this extra div closing tag, see what that does:
alt text http://i432.photobucket.com/albums/qq48/shiftypowers/validation.jpg