I am trying to style a box for the alternative text in pictures. If a pictures doesn't exist I want the alternative-text to appear in a box with text in it that looks like a picture. It works on PC, but it doesn't look the way I want on Mac. A thin grey border appears and a question mark is placed in the middle.
Picture: http://postimg.org/image/tte1lw8sj/
This is my HTML for the pictures
<a href='LINK.php?id=$id'><img src='$filename' class='headerimg' alt='$alttext' width='300'></a>
And this is my CSS:
.headerimg {
color: #000;
font-size: 20px;
margin-bottom: 5px;
max-height: 120px;
border: none;
}
Does any one know why it box looks different on Mac?
The rendering of an img element in situations where the image is not displayed is very browser-dependent, and you cannot expect to style it consistently. For example, some browsers simply render the alt text as if the element were just replaced by that text (and some people think that this is really the most appropriate way).
Unless you need to support rather old browsers, consider using an object element instead. It allows the fallback content to be normal HTML, and you can put an element there and style it as desired:
<object data='$filename' width=300><span class=alt>$alttext</span></object>
Related
I need to add some alt text and/or titles to some image tags on a webpage.
The html structure is not really in my control, so image tags are required even though the tags themselves are being set to display a flat colour derived from a hex-code stored in a SQL table.
Like This
<img style="background-color:{#hexCode};" title="{#colourName}"/>
With #hexCode being the colour code in question (i.e. '#1f1f1f') and #colourName being the descriptive name for the colour chosen by the client.
The problem I'm having is that because the colour is being set by the background-colorproperty the title text (and alt text does this too) is being displayed on top of the colour as well as on hover.
Google has not given me any useful solutions and I can't just not add the titles to the images? What should I do?
Why not use divs instead. The reason that the title or alt is showing up is because they are supposed to be displayed if the image is not found, and you are not giving a src.
<div style="background-color: gold; height: 30px; width: 30px;" title="Gold"></div>
However, if you must use an img tag with no source you can use src="//:0" to fake a valid source.
<img src="//:0" style="background-color: gold; height: 30px; width: 30px;" title="Gold" />
The problem I'm having is that because the colour is being set by the
background-color property the title text (and alt text does this too)
is being displayed on top of the colour as well as on hover.
No - The title and alt text is being displayed because your image is not loaded, precisely why they are used.
https://jsfiddle.net/b0njy0gg/
When an image source is present https://jsfiddle.net/thajo9pL/
I assume since you're defining img tags without a src attribute, SEO isn't one of your goals - if that's the case, the following solution of setting the font-size of your image to 0 will also affect the rendering of the alt text rendering, as you can see in this example:
img {
border: 1px solid #aaa;
display: block;
font-size: 0;
width: 200px;
height: 50px;
}
<img alt="Test" />
For anyone concerned about w3c validity or SEO-friendlyness: Do not try this at home!
Here's an example of code to place a border around span tags on hover:
CSS
p {
background-color: #def;
width: 137px; /* chosen so the text *just* fits, may need to alter
* for different browser or OS
*/
}
span {
margin: 0;
}
span:hover {
margin: -2px;
border: 2px solid #336;
}
HTML
<p>
<span>hover</span> <span>over</span> <span>the</span> <span>words</span>
</p>
(See demo at: http://jsfiddle.net/sS7vY/)
It uses a -ve margin to compensate for the border and avoid the text shifting position on hover.
On Firefox, hovering over the very last word causes it to wrap over to the next line, which I want to avoid. On Chrome it behaves as I intended and never wraps.
Is this a Firefox bug that needs reporting?
Is there a way to prevent this wrapping in Firefox, in a way that works for arbitrary text? (i.e. adding a couple more pixels width to the outer <p> is not a valid solution!)
Not sure if it's a bug in either browser as I'm not familiar with the inline box model, but using an outline instead of a border seems to work well as outlines don't affect box sizing, even on inline-level boxes:
span:hover {
outline: 2px solid #336;
}
I forded a working solution of your's : jsfiddle.net/dgY4J
It seems to be a mixed of 'box-sizing' and available width situation.
Also, if you use the css box-sizing, you won't have to deal with borders with the negative margins.
One last tip : chosen so the text just fits, may need to alter for different browser or OS || it will do the oposite. No browsers render font type the same.
I used to have the following structure to hold a logo with a link inside a div:
<a href="http://mysite.com">
<div class="logo"></div>
</a>
with the following CSS:
.logo {
float: left;
width: 120px;
height: 24px;
background: url('logo.png') no-repeat;
}
Is it wrong or there's any problem with compatibility if I remove the DIV and apply the 'logo' class directly to the A element? Just like this:
No, nothing wrong with it. It's actually better to do it that way, less redundant markup.
Some other things to note:
It's actually not valid for doctype other than HTML5 to put a block element (in this case, the div) inside an <a>
You should put a text inside the <a> for SEO/screen reader purpose and hide the text using text-indent:-999px and overflow:hidden. display:block is unnecessary as float:left implicitly sets it.
There is nothing wrong in doing this. You will need to add display:block for dimensions to apply to a non block level element, but as for how the site is read and crawled, no it will not hurt you.
You can make img a block element using this:
.logo {
float: left;
width: 120px;
height: 24px;
background: url('logo.png') no-repeat;
display:block;
}
And as the others are saying it is safe to use an a-tag with a background but normally i have the logo in a div and an anchor on top. Good luck ; )
It creates a major accessibility problem and is in direct violation of Guideline 1.1 of the modern accessibility guidelines, WCAG 2.0: “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.” The content of the a element is empty, and a background image is displayed, when CSS is enabled and image loading is enabled; but there is no text alternative.
And you cannot specify a text alternative for a background image. Use a content image instead:
<img src="logo.png" alt="ACME">
Here “ACME” is to be replaced by a descriptive name or abbreviation for the linked page.
By default, an image that is a link has a colored border, with the same color as link texts. You can remove it by using border="0" in the img tag or a img { border: none } in CSS.
I'm coding a site which has a big company logo at the top left.
So I code it with the logo as the background image, the company name in an H1, and hide the H1 using image-replacement techniques.
But there's no "home" link in the rest of the site's navigation. The logo is probably intended to be the "home" link. But because of the semantic/image-replacement technique, there's nothing to click.
What would you do in this situation? Position something transparent over the logo is my first thought, but I'd like to hear other suggestions.
Very simple - put an Company name inside your H1 element, and apply your image replacement styles to h1#logo a (or whatever selector you use). You'll need to add display:block; to the styles, to have the anchor behave correctly.
Let me know if you need more detail than this!
Extra detail:
OK - I usually use the following HTML and CSS for image replacement:
HTML:
<h1 id="logo">
[Company name]
</h1>
CSS
#logo a {
display:block;
width: 200px; /* Or whatever you like */
height: 0;
padding-top: 100px; /* The required height */
text-indent: -999em; /* negative text indent, leaves the box alone, and in ems to scale with text */
overflow: hidden;
background: /*whatever you like */;
}
This is a kind of 'double-strength' - the height:0/padding-top technique creates a box the size you need, but without any room for text to display (the background image will appear in the top padding, but the text won't). The big negative-text-indent is just a safety for browsers that get things wrong occasionally (old webkit used to have problems - not much of an issue nowadays).
Let me know how you go!
i'm doing a web app for iPhone, i'm having some troubles with borders.
To simplify things i have a background image for body, a box with rounded corners which have some elements inside and a title, and that's where problems begins as i want my title to be on the top border of my box without having the borderline behind it.
Here is a screenshot :
I can't see any solutions to render it properly, some of you have any guess ?
It would be much appreciated
From what I can gather, it looks like you should be using the fieldset element (as you are "grouping" form elements together), which conveniently also looks the way you want it to:
<fieldset>
<legend>Promoter</legend>
<select>
<option>Choose a promoter</option>
</select>
</fieldset>
Styling is simple. Align the legend text and style the fieldset border using CSS:
fieldset {
border: 1px solid black;
border-radius: 5px;
}
legend {
text-align: center;
}
For a live example, see this jsFiddle demo.
Not sure if there is a simple pure css based solution.
A method that somewhat achieves what you want is to have text shadow on the text floating above the border, using a color that blends with the general color of the background. You can tweak the values such that the border will (at least mostly) fade away behind the text. This will of course also fade away the background image, replacing it with the color of the shadow, but it might look fairly nice anyway. (Having a more solid background for the text will make it easier to read, too).