Working on a rather small, and simple layout, I decided to use Meyer's CSS Reset rules to clear some of the expected discrepancies between browsers. All was working fairly well until I decided to add a few paragraphs into a couple nested divs.
Once I placed the paragraph-tags within the second nested div, the background images of both the parent, and the grant parent divs vanished in IE7.
Removing the paragraph tags (and going with untagged-text) returns the background images. Additionally, leaving the tags and removing reference to the reset.css file restores the background images.
Obviously I don't want to go with either of those routes to solve this issue. Any CSS gurus here know what is taking place?
Demo: http://www.sampsonresume.com/projects/patriot-depot/
It looks like a version of the disappearing content bug in IE.
Add zoom:1 to div.pd_horiz_content and div.pd_horiz_content_b. That will invoke 'hasLayout' in IE and your background will show up.
You can also invoke hasLayout by adding a dimension (width:960px) to the divs. This would probably make more sense in your case since your divs have a fixed width based on the background images.
Oddly enough, when I remove the following rule from the reset.css file, the issue is resolved:
background:transparent
This rule is applied to the first large block of matched elements, so I'm not sure the implications it will have in the long run. Hopefully there's a better solution, as I'm a little uneasy about editing Meyers' reset.css in order to "fix" my problem.
Related
I have been working on a little photo slider. It looks slightly different in Chrome than in FF so I thought a CSS reset would make them both look the same. I used the Yahoo! YUI CSS reset model but nothing changed. It looks good in FF but in Chrome the "Resume" button on the right side sticks up too high and a thin gray line at the bottom of the big pictures gets cut off where the main buttons are located. Here is the URL:
http://www.replayground.com/slider/02.html
You can ignore the stuff below the circles. Just testing stuff down there.
Here is what I added to my 02.html file:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
I'd really like advice on how to get CSS Reset working correctly. Not how to fix the specific buttons problem you see. As I add elements to the page I don't want to have to go through this each time.
A CSS reset is not designed to make all the rest of CSS cross-browser. It is designed to set all of the client default rules on all the different browsers to the same thing so that you are always working from a predictable set of CSS rules. How the browsers interpret those rules is still specific to each one.
In your case, you still need to figure out how to write CSS rules that operate the same in both Chrome and FF - the reset simply levels your starting point a little, it doesn't remove the browser rendering differences.
You may find a cross browser CSS framework (e.g. blueprintcss.org or 960.gs) to be more helpful for your current situation. They often use a reset, but also have rules that compensate for the differences in the rendering of the after-reset CSS rules.
jball is very right about the resets. They just allow you to start with a blank page, but you should still write a proper document structure and good CSS to get good and consistent results.
In your case, all elements in your page are loose in the page. This will give you trouble in the end. Some things will shift a few pixels, especially when you don't specify exact height for every item. Fonts are rendered in different heights by each browser. These may be tenths of pixes, but when they get rounded, your website is a little off between browsers.
When you use a little deeper nesting of elements, you can make better use of positioning elements (relative and absolute). If you put in a specific div for the header, and give it a fixed size, you can position each element in there very precisely, which is especially handy for headers and menu's.
I took the liberty of creating a small example, which shows just some basics of positioning. It is not perfect and uses brightly colored borders instead of images for the layout. But it's just for showing the element nesting and absolute and relative positioning, along with a negative margin trick.
http://jsfiddle.net/YwCxQ/3/
http://www.mapleboutique.com/_blog/maple_blog
can someone explain what's going on here? according to this link: http://austinmatzko.com/2007/07/25/internet-explorer-7-float-bug/ –I thought it made perfect sense. I had container elements with set heights causing the weird floating. But after spending an hour going through and essentially deleting any associated heights I still have the problem in IE7/windows.
You need to remove clear:right from .blog-post .post-body to fix the heading overlap with the image and remove zoom:1 from .post-body a to fix the text-wrap around the image.
The heading is also floated and cleared right but clear:right on the post-body seems to be causing IE to clear all the floats, even the heading.
The zoom:1 seems to be clearing the image's intended float by giving the image layout.
As #Webars has already said, this layout is overly floaty and should be simplified and could be done without the need for zoom hacks. However in the meantime, the IE specific styles (zoom being one of them) could be added to a seperate stylesheet and included for IE only using Conditional comments.
The best way to display what I see is by giving you a couple of screenshots:
http://i150.photobucket.com/albums/s99/dc2000_bucket/scr1.jpg
http://i150.photobucket.com/albums/s99/dc2000_bucket/scr2.jpg
The link above also shows the html/asp code.
The question is why am I getting that white line when I render content in the web browser????
PS. I'm using VS2010 (that I am ready to smash with a hammer...)
Images are inline elements.
Inline elements are rendered like characters.
Characters sit on a line.
There is space below that line for descenders (which you find on letters like g, j and y but not a, b, and c.)
That space is what you are seeing.
You could twiddle the vertical-alignment of the images or stop using layout tables
User CSS Reset, and everything should be solved. The reason you're getting the weird artifact is that, browsers by default apply some style on HTML elements. To nullify those default styles, designers usually use CSS Reset. A CSS Reset is a CSS file that tries to remove all default styles applied by browsers.
To debug your CSS margins and paddings, use Firebug with Firefox. Here is an image of how to do that:
You may be getting the browser's default styling here. I would recommend grabbing a CSS reset and seeing if that helps
OK, guys, I got the bottom of it. The following style should be added to the tag that hosts the image. I don't know why, but it helps:
td{ font-size:0; }
Thanks everyone for your help!
Everyone knows that there are problems with the float CSS property: there are text jogs in some browsers, you have to clear them to pull parent elements around a floated div, etc.
Let's assume I build a layout and float everything, and I'm careful to control for the browser-specific bugs. Are there disadvantage to using float for everything? Will the page take longer to render, or is there a better practice?
I'm trying to improve my CSS layout building technique.
#kevin; float is not a bad practice; it depends on how you are using it & what the needs of the design are. There is no need to use it on everything when there is no need & it comes from experience.
Every browser renders float correctly.
yes if you use clear:both in your markup like this
<div style="clear:both"></div>
it's increase your markup which increase your page loading time.
. SO, use overflow:hidden in your css to clear it.
Floating everything can make for a great deal of inconsistency; depending on how wide a screen is and how tall certain elements are rendered, you can end up with a hodgepodge of screen jag.
For example, widening the screen would cause more elements to fit on the top line, so they would jump up. Items not in the top line will slide down, and then catch on the corner of an element slightly taller than everything before it.
Float is a handy tool, but it's no panacea; use with caution. Make yourself a sandbox site, and use something like Chrome's developer tools, or Firefox w/ Firebug to see what results you get when floating it all.
I dislike using floats because of these clearing issues. I generally use display:inline-block, and for my IE6/7 stylesheet for the same rules, I put zoom:1; display:inline
With inline-block, block elements flow like inline elements, while behaving like blocks. This I feel is more intuitive than breaking out of the flow like floats do.
I use this kind of layout on my twitter client: https://timshomepage.net/twitter
And here's the uncompressed stylesheet: https://static.timshomepage.net/css/twitter.css
I have created a Wordpress child theme based on Thematic and I'm currently trying to debug the site in IE 6/7. My suspicion is that the problem is hasLayout, as that seems to be very common and the symptoms are congruent, however I have checked many of the broken elements and added hasLayout properties to those that did not already have them with no advancement.
I did have z-index set in several of the CSS classes, which I have now removed, and I'm wondering if any of you have some other suggestion about other debugging approaches.
The site is: http://032b4a6.netsolhost.com/WordPress/
I have posted here instead of the Wordpress forum as I believe my problem is more related to a standard CSS issue than anything specific to WP.
EDIT:
To detail the kind of errors I experience in IE6/7:
The header, which is an anchor with a css background property, pushes down on the search box, causing large gaps.
The nav displays as if it has an extra 75px of margin under it, causing another large gap.
The right sidebar is missing. It can be found just barely peeking from the left side of the container below the left sidebar.
The left sidebar appears to have an extra 15px of left margin, pushing it onto the main content div.
To check if a layout problem in IE6 / IE7 is hasLayout-related problems, I sometimes find it useful to use a rule like this for debugging - it's propably not something you want to use in your final stylesheet (as it will probably introduce new problems), but often it can reveal what elements needs to be given layout:
* {
zoom: 1 !important;
}
Welcome to the world of conditional comments and IE stylesheets: http://codex.wordpress.org/Conditional_Comment_CSS You need to tweak the CSS for IE and test with native IE, not browser shots.
Try taking the slider out for a minute to see if there is a CSS conflict.
And you have a few minor html errors, one having to do with an inline style sheet:
[Invalid] Markup Validation of 032b4a6.netsolhost.com WordPress - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.