So I have a signup form on the top of my website and in safari/firefox it looks perfect but on ie7 for some reason it is pushed down so it does not look right. I tried removing all padding/margins on all of those elements but it still seems like there is something pushing it down when that happens. Does anyone know why this is happening. You can see it at the top of this page:
http://www.campusmediawatch.org/partners
Thanks!
A <form> needs to have padding & margin set to 0. Then setting the vertical alignment to center may help too. If it still doesn't work; try changing the doctype to HTML instead of XHTML, since IE uses different renderers for each doctype.
There are two likely cuases:
It's always a bit tricky to debug these issues but this could be a problem with line-height. I would try specifying an explicit line height of 1em or so to elements in the form.
In your case it's more likely that the submit button is causing your issue. The different web browsers render submit input tags improperly. Try hiding your submit button by styling it with display none to see if this is in fact causing your display issue in IE. If it is you can create a stylesheet specifically for IE via conditional comments and apply alternative styling to the submit tag. OR you can use absolute positioning for the submit input which should allow you to avoid resorting to a browser specific stylesheet.
Related
I have a page in asp.net that does not render correctly in Chrome: when a certain block becomes smaller (because of the number of the elements of a grid on the page) the background does not get entirely refreshed, it leaves a part fom the previous rendering, until changing the tab browser and returning back. Same thing happens when going through blocks that become visible and then hidden. Is there a way to force a re-render of the background (I'm using UpdatePanel and Chrome v 24.0.1)? Or has anyone seen this behaviour and managed to solve this (could it be some z-index css problem)? Please help...
After a while of researching the asp code, the properties of the grid, the css, the foums on chrome bugs, it seems that a css property modification of the div underneath the grid did the trick, I had to change overflow: visible to overflow: hidden.
I've got a fairly simple design that I'm working on in ASP.NET.
The problem is when I take the design from flat HTML which works fine, to asp.net, it adds what looks to be a 20px blank margin at the top of the page and around certain elements.
I presumed this was to do with the not having set my margins to 0px on the body and form elements in the CSS. I've done this, and it still has the problem in Chrome and Firefox, but not in IE7 or IE8.
Any ideas?
I've seen some unwanted margins on ASP.NET pages and they had something to do with invalid markup (might have been because of a missing div end tag or something similar - I can't remember the exact reason). So check your markup. Also make sure that you are using a valid doctype (i.e. not in quirks rendering mode).
Firebug is often a great help in this kind of situations. You can inspect exactly which element is causing the extra margins. Chrome has a similar "Inspect element" functionality built in.
I've got myself multiple a tags floating on a page.
They have been styled in a unique way to center an image horizontally inside it, using a span and css. The a tag itself has fixed width and height.
I thought this was basic stuff, and my theme was causing the issue, but I've created a stripped down jsFiddle and I'm still getting the same problem when running the jsFiddle in IE 7.
The a tags are all click-able in every browser apart from IE7, why is this happening?
Can anyone explain? Thanks.
http://jsfiddle.net/motocomdigital/Qk9tu/6/ - Test click-able state in IE7, works fine everywhere else.
Don't worry about IE 6 - I'm not coding for this anymore.
On IE, a link element (<a></a>) with an empty attribute href doesn't display a link-cursor (hand).
Either put a # in your href attributes or add a cursor:pointer on a.home-module
It's the spans inside the a that cause the trouble...
You can achieve what you are trying to do with just CSS, but it requires a slightly different layout in your HTML and some extra CSS.
JSFiddle - http://jsfiddle.net/8E8um/2/
Note
In a.home-module I have added a transparent image. This is because IE7 will not assign an "empty" parameter (due to the negative text-indent) to the top level and would therefore still leave the link unclickable.
you should assign "#" to href attribute.
Try this: http://jsfiddle.net/Qk9tu/5/
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!
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.