Can anyone tell me why the date (i.e. "January 2012") in the nav bar of the mini calendar at the top of the right column is being displayed as two lines of text instead of one on some computers using IE7&8??? Seems to render properly in other browsers... I have researched but cannot find a solution.
http://www.stamfordsymphony.org/indexGLK.php
Thank you!
The width: 70px; on your .monthYearRow CSS class is not wide enough for the text in compatibility mode. In non-compatibility view, your specified width is ignored in favor of maximizing the size of the table cell.
Simply remove the width line altogether from that class, or at least override it using the element's id if necessary.
I'm not sure what is causing the problem, but removing unnecessary style rules will certainly narrow it down. for instance, when I remove the width attribute on .monthYearRow in your style sheet, the issue disappears (at least for IE 9 running as IE 7).
Try just whittling away style rules until you find which one is the offender.
Related
I'm going nuts on this, I can't figure out what causes the margins of the right sidebar gallery images to be rendered differently on opera browser. More specifically the bottom margin of the images seems to be doubled in every other common browser, its set to 2px and only opera displays it as 2 px.
This is the url - http://www.roxopolis.de/media See screenshots here.
Please help me out with this, I don't care too much about the fact that its displayed differently but it exposes a bit of the following gallery images which are supposed to remain hidden so thats what bothers me. If there is another way to hide the following images (which are placed by widget) that'd be fine too. Maybe setting the margin conditionally for opera?
I've had a quick look at the page in Dragonfly as well as Chrome's inspector for comparison and no particular style, including inherited ones, strikes me as "causing" this issue. Maybe someone else can find something, but at a glance, I'd say Opera seems to be "doing the right thing".
You might have more control over the spacing if you put each anchor tag along with its respective image inside its own container and tried to style those (e.g. a div containing the anchor containing the image for each item, and float them left within the parent container div).
Is there a particular reason you have more images than you want to display? I don't see any controls to scroll the images on that page, so I'm not sure why you need to have more than the six images you're showing already. Surely if you have code somewhere that randomises the order, you can change it so that it only displays the first six images.
Also, have you tried breaking the problem down to a smaller use case that can be tested/tweaked in a jsfiddle? That may help to get to the bottom of your issue if you can't solve it using the above suggestion.
I'm trying to style a text input to display a "grid" aligned with the text, see example below:
I use a fixed-width font, with a fixed letter-spacing. In theory, it should be possible to get the same expected rendering on every browser, but it's a well known fact that fonts are displayed differently across browsers.
If I get the alignment right in Firefox, it doesn't work on IE etc. As a workaround, I could use different CSS between IE and firefox to show a slightly different background image. But even on Firefox, it seems that the rendering depends on the screen resolution (I got different results on a 4:3 and a 16:9).
Does anyone have an idea regarding how I could accomplish a correct aligmnent between the text and the grid?
Thanks
There is a work around, which may work irrespective of resolution and browser.
Take a span and input field in your div. Show the span and input field overlapping with each other.
Now create a string of '|' having equal character spacing and width as that of input field's character. As these are overlapped it will look like a grid when the user will type.
Hope this will work.
You can add this code to input into css file:
letter-spacing: 24px;
Then you will have spacing after any char, and You can add ready background with grid too.
I just spent an hour troubleshooting an issue I had were all my paragraph elements were shifted down.
This happened after I moved the design from jsfiddle.net to my web host.
I killed an hour before I finally realized I needed to insert
p{margin:0px;}
and all was well...well still off by 1px;
Questions:
Why did this error not occur in jsfiddle.net?
Why does FF CSS Debugger not let me know that there is a margin in there or where it came from. I don't know what is was set to but it was not 0px;
I'm trying to learn from "my mistakes" so I can know what to expect next time.
Web browsers set their own default values for rendering HTML elements. This includes margins, paddings, font sizes etc. When you create a HTML document with no CSS you can see lists, paragraphs and headings are formatted in a default way.
Debuggers tend to show the values that you have applied to the document in your CSS.
To get around these sorts of inconsistencies (browsers use different defaults) some people use a 'reset' CSS file that removes this behaviour by setting as much as possible to 0.
Take a look at http://meyerweb.com/eric/tools/css/reset/
I'm using css gradients and padding to simulate buttons around an anchor tag. The problem I am running into is that firefox seems to make the button 3 pixels larger. 1 pixel on top and 2 on bottom. This seems to happen with not only the example i posted but everywhere on the page where i use the padding. I put up and example at http://wemw.net/example.php. In firefox the button top and bottom line up perfectly with the search box, but in chrome as i said its off by 1 pixel on top and 2 on bottom. I am using the w3 transitional(tried strict as well) doctype and a css reset. In the reset all anchor tags are set to padding: 0, so I'm confused as to why this extra padding is being added. Is there a workaround to this or is it just something you have to deal with when working with gecko and webkit browsers?
EDIT: So I logged over to windows and it is appearing the same in both browsers now. I'm assuming it is OS specific problems? Since no where near as many people use linux I'm going to change the padding to make it work, but in the interest of consistency can anyone offer a solution for cross-os cross-browser solutions? I do not own a mac and cannot easily test it there, but if windows/linux can have problems with the same versions of the same browsers is it safe to assume mac could also have issues i am unaware of?
It's not the padding on the anchor tag, it's the size of the text box that is inconsistent. <input> elements always caused such problems for me too, and I always found it extremely tedious to align them together nicely (you haven't yet seen it in IE8, have you?). I think that the easiest cross-browser solution here would be to remove the border from the text box and use a background image instead (or better yet, a background image on the element containing the text box) properly aligned with the button.
From the Google Results page, the examples I saw were working only in IE and one case in Opera.
Is there any way this can be done consistently across all browsers?
Also, is there a difference between the main scrollbar of the browser (which appears across the whole page) and the scrollbar in a text area withing the page? Can I manipulate only the latter if not the former?
You can create your own scrollbars within a page using a combination of CSS and JavaScript. See https://stackoverflow.com/questions/780674/scroll-bar-with-images.
However, rendering of the scrollbar outside the page is up to the browser.
WebKit recently added the ability to style the default scrollbars, but this still only applies within the page.
EDIT: It seems that MooScroll has managed to 'replace' the browser's main scrollbar by telling it there's nothing to scroll and then creating their own scrollbar at the right-most side of the window. Clever!
Steve
Steve had a good answer, but allow me to continue.
In IE 5.5-7 (but I think they're getting rid of it in 8), you could style the scrollbars with some proprietary MS CSS properties. I wouldn't recommend this.
Steve mentions that the scroll bar outside of the page is up to the browser. Whilst this is true, you could fake it by setting the body element to overflow: hidden and then placing a huge container in the HTML with height: 100%; width: 100%.
I wouldn't recommend you touch the user's scroll bars. They are a well known convention, and they are quickly recognisable by the end user. They know how to use the default OS styled scroll bars, not your quick attempt at cross browser CSS/JS implementation. I think it was Steve Krug that said 'Don't make me think!'
Have you ever seen Flash sites that rolled their own scroll bars? ugh!
There is no cross-browser method.
Short answer no.
The appearance of the browser is out of your control unfortunately - you're only supplying the contents. It's up to the browser to decide how it wants to scroll the contents.