My page is white and the background image for links is mainly black. I need the link text to be white to be visible over the black background.
Ive set the text size in pixels, but if it was somehow resized then the text may not be visible over the page as its also white.
Is this OK? Generally zooming seems to be done by scaling the whole page not just resizing text. Also ive used px, which generally dont resize. If this isnt OK, how else can you have white link text over a dark background?
Thanks
Could you not just have dynamic sizes for the menu items ?
That way if the text is resized then so will the menu item in which it is contained.
if you use css and be sure to validate your markup using w3c the fallout should be minimal as most browsers will try and render standards compliant code reasonably well.
I'm sure you've seen this before:
http://validator.w3.org/
If nothing else it will at least look good or poor in everything rather than good in some and poor in all so that makes the issues a bit easy to pin down.
oh um ...
how would the text be resized anyway ?
To my knowledge unless you provide a different / optional style that can be added or removed text sizes are fixed, for example:
<div style="font-size:10px;"> test </div>
Assuming the page renders correctly that "test" div will always render the text at 10px ... if the user uses their browser to make the size bigger or smaller the entire div scales not just the text, this is the reason for standards ... makes that kind of problem where the text resizes and the div doesnt go away.
hope this helps :)
Related
Or who knows, maybe it's Chrome, Safari, and Opera, which all show the images how I want them, that are wrong.
Essentially what I have is an image and some associated text that I want on the side of the image when the window is big, and below the image when it is small. The problem happens when the window is mid-range width. The image should shrink a bit to allow room for the text (as it does in webkit/blink). Anyway, it's probably best demonstrated in a jsfiddle:
full screen
editor
I included some Javascript in there that I use to control the height if the image is taller than the window, but I guess jsfiddle doesn't update window.height and that part works in all browsers anyway so I didn't bother debugging it. Though I am curious if anyone has a CSS/non-javascript solution for that.
And I guess the fullscreen javascript doesn't work in jsfiddle either, so I just uploaded an all-in-one file here where everything does work (besides the issue I'm writing about.
.mediaFile { width:auto;}
changing to…
.mediaFile { width:100%;}
I found changing .mediaFile width to "100%" makes Firefox show the image at the correct width most of the time, but causes other issues with fullscreen and small-height-windows that makes it more of a problem than a solution.
I have the problem that when I view my site on mobile devices or if I manually resize my viewing window to a point where the text begins to wrap, the white area behind my text disappears. This whould not be a big problem in mormal circumstances but for me it's a problem because I have a dark background image and this makes it impossible to read the text once this happens. I tried to solve the problem by disabling responsiveness but this did not solve the problem.
Here is my the website: me-afrika.de
Does anyone have any ideas how I can overcome this problem? Thanks in advance.
The white background is being applied to the ".container" element only when the window is at least 1024px wide.
At smaller sizes it's trying to load a background image that doesn't exist (http://www.me-afrika.de/wp-content/themes/musicplus/images/content/main-n.png).
I'm having a hard time trying to figure this out. For example, if you re-size this website's (http://www.noxinnovations.com/) window size until you see the horizontal scroll-bar and then scroll to the right, you'll see that the header's dotted line disappears as well as the color. But sites like facebook or twitter don't have this problem. I was wondering how they do it?
If you take a look their Html and Body elements do not fill the whole page. (The Firebug extension for Firefox makes this evident.) That isn't normal. What happens though is the element which contains the bar's background ends up being constrained by the body element's size. It is probably just the product of bad design on their part. You shouldn't have that issue if you create a site yourself.
I'm having some trouble with the CSS in my site, both with image sprites and IE compatibility.
Here is a jsfiddle: http://jsfiddle.net/lipestyle/EjQTP/7/
The two main problems are:
In IE, the contact links at the bottom are not appearing in the blue bar, but way down and to the right of the rest of the site.
The image sprites for MMA Cage Door and FightNight Nutrition are not working. It appears that the hover image is on constant display, as the non-hovered image is supposed to be much lighter than what we are looking at.
On a side note - For some reason the background image repeating isn't working in the jsfiddle, but I haven't noticed a problem with it outside of that.
Any advice that you all can offer would be greatly appreciated.
Thank you.
EDIT
One other thing I am noticing with the sprites. It appears when I hover over an image the first image doesn't disappear, it still remains while the hover image appears on top of it. Is that how it is supposed to work? Because my images are semi-transparent, this is something I would like to avoid if possible.
Here is a link to the site in action: http://bit.ly/h1OXQA
Could be a width, margin-left, or even position relative/absolute giving problems here. I have not checked in depth through all css code to see the cause. A fast/dirty fix, obviously loading alternative css or html for IE7, is that setting (in IE7) the UL #social with top:190px and left:100px , it seems to fit ok (or fine tune to the preferred position) .I'd go from here to guess what is causing to act differently.
Seems you already fixed, images seen light when not hovered, darker when hovered. All in IE7.
Anyone know if there's a bullet-proof (standards-compliant to XHTML1.1 strict, cross-browser, non-javascript) way to use CSS and background images to turn an inline link into a visual button that will stretch to accommodate different amounts of text (or text resizing)?
I'm thinking I need to use background images as the designer's buttons have rounded corners with a different coloured border. It must work in IE6 (Government job).
Im pretty sure the answer is no, but as always thought it worth a check.
Amongst other things, I've already tried variations on the sliding doors technique, but can't make it work as the solution needs to work inline (i.e. within a paragraph) and I can't set a fixed width.
EDIT: There are several buttons, each of which has a different colour for foreground, border and background. They also have a gradient 'face', but no need for transparency or anything else 'unorthodox'. Unfortunately I can't link to examples as I'm under an NDA.
I'm not sure if this will fit your needs, but I helped someone with hoverable rounded buttons in this post... it uses only HTML and CSS.
I don't think you can do this within your restrictions. The problem is that you have one element, but to properly do stretching, you need three (unstretched left side, stretched center, unstretched right side).
Yeah, you probably need to make image buttons for this.
Just as an aside in future, here's a page on CSS button styling.