I’ve been pulling my hair out about trying to get a couple of elements to line up across browsers. I am working in Drupal 7, if that matters.
I am working on a local vbox vagrant machine, so I cannot link to the content. It also will not let me post a picture, so here are links to the two variations of what is being displayed:
The globe and social icons are fonts from Glyphicons and the ssrn icon is a png that I created to mimic them. My problem is they are not responding to margins the same way. I think it has something to do with having to give the glyphicons a negative top margin to line them up, but that leaves the ssrn icon out of line in some browsers. Is there a way to define margins based on webkit etc? I cannot find one.
HTML:
<div class="views-field views-field-field-website"> <div class="field-content"><div id="website">
</div></div> </div>
<div class="views-field views-field-field-ssrn"> <div class="field-content"><a href="http://test" title="test" target="_blank">
<div id="ssrn"></div>
</a></div> </div>
<div class="views-field views-field-field-linked-in"> <div class="field-content"><div class="bio-social">
<div></div> </div>
<div class="views-field views-field-field-twitter"> <div class="field-content"><div class="bio-social">
<div></div> </div>
CSS:
#website {float: left; width: 24px; margin: 5px 10px 5px 0; width: 48px; height: 48px;}
#website a::before {color: #00479A; font-size: 48px; margin-top: -14px;}
#website a:hover:before {color: #444444;}
#ssrn {height: 48px; width: 48px; float: left;
margin: 5px 10px 5px 0px; /* FIX CROSS BROWSER MARGIN ISSUE!!!!!! */
background-image:url('/sites/all/themes/seeblue_law_subtheme/icons/ssrn1.png'); background-size: 48px;}
#ssrn:hover {background-image:url('/sites/all/themes/seeblue_law_subtheme/icons/ssrn2.png');}
.bio-social {float: left; margin: 5px 10px 5px 0; height: 48px; width: 48px;}
.bio-social a::before {color: #00479A; font-size: 48px; margin-top: -13px;}
.bio-social a:hover:before {color: #444444;}
The following properties will not work in every scenario, but are included with Webkit.
-webkit-margin-before:
-webkit-margin-end:
-webkit-margin-after:
-webkit-margin-start:
-webkit-padding-before:
-webkit-padding-end:
-webkit-padding-after:
-webkit-padding-start:
You can look on this page for more information.
Also, are you resetting your CSS before you begin testing?
You could use http://browserclass.org/ which is a standalone JavaScript library. It will add extra classes to your body tag with the current name and version of the browser and with the used OS too, so you will be able to write specific css to handle the problem. This lib also has a Drupal module.
For example you can declare this in your css:
.ff.ff28.mac .bio-social { ... }
Related
I did already find a post about using the <hr> tag to insert a line break, but when I looked up the tag on the w3 website (http://www.w3schools.com/tags/tag_hr.asp) it says that all attributes of the tag are not supported in HTML5. Obviously I want to make my website HTML5 compatible, so what would be the best way to insert a visible horizontal line?
Thanks
You can still use <hr> as a horizontal line, and you probably should. In HTML5 it defines a thematic break in content, without making any promises about how it is displayed. The attributes that aren't supported in the HTML5 spec are all related to the tag's appearance. The appearance should be set in CSS, not in the HTML itself.
So use the <hr> tag without attributes, then style it in CSS to appear the way you want.
Simply use hr tag in HTML file and add below code in CSS file .
hr {
display: block;
position: relative;
padding: 0;
margin: 8px auto;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #aaaaaa;
border-bottom: 1px solid #ffffff;
}
it works perfectly .
You can make a div that has the same attributes as the <hr> tag. This way it is fully able to be customized. Here is some sample code:
The HTML:
<h3>This is a header.</h3>
<div class="customHr">.</div>
<p>Here is some sample paragraph text.<br>
This demonstrates what could go below a custom hr.</p>
The CSS:
.customHr {
width: 95%
font-size: 1px;
color: rgba(0, 0, 0, 0);
line-height: 1px;
background-color: grey;
margin-top: -6px;
margin-bottom: 10px;
}
To see how the project turns out, here is a JSFiddle for the above code: http://jsfiddle.net/SplashHero/qmccsc06/1/
Instead of using <hr>, you can one of the border of the enclosing block and display it as a horizontal line.
Here is a sample code:
The HTML:
<div class="title_block">
<h3>This is a header.</h3>
</div>
<p>Here is some sample paragraph text.<br>
This demonstrates that a horizontal line goes between the title and the paragraph.</p>
The CSS:
.title_block {
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
margin-bottom: 5px;
}
I am answering this old question just because it still shows up in google queries and I think one optimal answer is missing. Try this code:
use ::before or ::after
See Align <hr> to the left in an HTML5-compliant way
I assigned a background image for a <div> in the CSS of my HTML code, i assigned the width and height and also add contents to the <div> but the bg still not shown, this is what I've tried:
CSS:
#order_list {
position: absolute;
width: 25%;
height: 100%;
z-index: 2;
left: 75%;
top: 35px;
color: #F33;
background:url(img/ItemList.png)
display: inline-block;
alignment-adjust: central;
font: Arial, Helvetica, sans-serif;
font-size: 14px;
font-size-adjust: inherit;
grid-rows: inherit;
list-style: upper-alpha;
word-spacing: inherit;
word-wrap: break-word;
vertical-align: central;
}
HTML:
<div id="order_list">
<div id="confirm" class="buttonClass">
<div align="center">Confirm</div>
</div>
<div id="total" class="totalClass">
<div align="center"></div>
</div>
</div>
screen shot:
It might depend on how your browser interprets it, but you forgot a semicolon at the end of
background:url(img/ItemList.png)
Without it, browsers won't show the image. Thanks to #Leeish for noting that in this case, a semicolon is absolutely neccessary.
; is missing at the end of background:url(img/ItemList.png) which is why you are not getting the background image.
Semicolon is needed to separate the declarations from one another.
It can be omitted from the last declaration in a CSS rule, but it is recommended so that later if you want to add more declarations, you won’t need to remember to add it in there.
I'm currently working on a website design and need to make some changes to an advertisement. The CSS I apply to the main div (.ad_728x90_home) I'm targeting doesn't work. I have applied a margin-top to the div but that doesn't work, tried other CSS but it's not getting picked up.
Any help would be greatly appreciated! The advert is located below the second post.
.ad_728x90_home {
height: 130px;
}
.ad_728x90_home_text {
margin-top: 40px;
}
span.ad_728x90_home_h3text {
color: #FFFFFF;
float: left;
font-family: LeagueGothicRegular;
font-size: 23px;
line-height: 34px;
margin: 13px 0 22px 10px;
text-transform: uppercase;
width: 185px;
}
.ad_728x90_image {
float: right;
margin-right: 10px;
}
<div class="ad_728x90_home">
<div class="ad_728x90_home_text">
<span class="ad_728x90_home_h3text">Need more quality fonts? Head over to myfonts.com</span>
</div>
<div class="ad_728x90_image">
<img class="scale-with-grid" src="images/ad_728x90.jpg" alt="Blog Post" />
</div>
</div>
Be sure you have the right class names between .ad_728x90_home and .ad_728x90_home_text and double check your HTML nesting.
I checked your items with Chrome's inspect element and the <div class="ad_728x90_home_text"> seems to start above your ad, at the top of the page.
Try going to make it a position:relative as it seems like a main div element
.ad_728x90_home {
Postion:relative;
top:10px;}
I cannot say the exact pixel amount of it as the margin-top doesnt work try using it as relative.
It's weird that I have this bug on IE8 and not on IE7, where it shows up fine:
http://www.axiscirugiadecolumna.com/
I'm using a wordpress plugin for the shadow+ribbon (I hardcoded the ribbon inside the shadow plugin). The border is simply css but on IE8 the right border won't show up and I just don't know why.
My html is the following:
<div class="alignright" style="overflow:hidden;display:table;line-height:0;text-align:center;width:453px;">
<div class="ribboncontainer">
<div class="ribbon"></div>
<img height="297" width="453" style="padding:0 !important; margin:0 !important; max-width:100% !important;" alt="" src="http://www.axiscirugiadecolumna.com/wp-content/uploads/2011/11/foto1.png" title="foto1" class=" size-full wp-image-143 shadow_curl">
<br><img style="margin:0 !important;height:10px;width:100%;-moz-opacity:.75;opacity:.75;" class="shadow_img" src="http://www.axiscirugiadecolumna.com/wp-content/plugins/shadows/shadow_curl.png">
</div>
</div>
This is after the plugin is applied. The inline styles are applied by the plugin.
And my css:
.alignright, .aligncenter, .alignleft {
margin: 5px;
padding-right: 5px;
float: right;
}
.ribbon {
background-image: url("ribbon.png");
bottom: 21px;
height: 40px;
position: absolute;
right: -5px;
width: 154px;
z-index: 888;
}
.ribboncontainer {
position: relative;
}
.shadow_curl {
border: 6px solid #BAD5BC;/*Right border is missing in IE*/
}
I think the issue persists even if I get rid of the ribbon classes and divs.
Remove that
max-width: 100%;
style.css (line 894)
img.size-auto, img.size-full, img.size-large, img.size-medium, .attachment img
Well, this is because IE8 (I also tested your page on IE7) - and both does not support a CSS rule "box-shadow", in your file style.css (line 171).
If you insist to use a drop shadow (as I assume), you should use a transparent png/gif file for these browsers. Keep in mind that IE6 does not support native png files, so it's better to use gif.
What is the best (as in cross-browser) technique to do image replacement in CSS? I am using sprites to do my navigation, but I want the markup to remain SEO friendly. Given the following HTML structure...
<div id="menu">
<ul>
<li>Test</li>
<li>Tester</li>
<li>Testing Testing</li>
</ul>
</div>
What is the best way to replace the text with a background image using CSS only?
I am currently using this...
text-indent: -9999px;
But, it fails with CSS on, and images off.
If this is the html:
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
And this is the css:
#menu ul li a{
display: block;
overflow: hidden;
text-indent: -9999px;
background: transparent url(yourpicture.png) no-repeat 0 0;
width: 100px;
}
#home{
background-position: 0px 0px
}
#about{
background-position: -100px 0px
}
#contact{
background-position: -200px 0px
}
The image would then be 300px wide, and each tab would be 100px wide.
In 2008, Google's presentation at An Event Apart made it clear that valid image replacement will not be penalized by Google. See Mezzoblue's post about it
Basically, as long as the image you replace the text with has the same text in it, it will be considered valid and not trying to cheat search engines. How do they determine whether the image is valid or not? I have no idea... OCR? Manual review?
As far as CSS on/images off, there is no perfect solution, all of them require extra non-semantic markup. See the css-tricks link that beggs posted on the different techniques. I personally do not bother with the very small percentage of users who browse with CSS but no images.
Your choice is simple. Extra markup, or don't care about css on/images off.
The background image is usally applied to the <a> link, giving the entire clickable area an image. To hide the text you can use a very big negative value for text-indent.
I just came up with this, it seems to work in all modern browsers, I just tested it then on (IE8/compatibility, Chrome, Safari, Moz)
HTML
<img id="my_image" alt="my text" src="images/small_transparent.gif" />
CSS
#my_image{
background-image:url('images/my_image.png');
width:100px;
height:100px;}
Pro's:
image alt text is best-practice for accessibility/seo
no extra HTML markup, and the css is pretty minimal too
gets around the css on/images off issue where "text-indent" techniques still hide text for low bandwidth users
The biggest disadvantage that I can think of is the css off/images on situation, because you'll only send a transparent gif.
It might be possible to write a little javascript to help out with this, replacing all the image sources with their background-image css properties. But this would only work if the browsers still attaches css properties to elements and then ignores them. I don't know if this is the case or not, I'll have to test it out. You'd also want to develop a javascript-based test to see if css is being applied to the page (maybe check the position of some test element).
btw, I'd like to know, who uses images without stylesheets? some kind of mobile phone or something?
edit:
Based on comment below... inline styles hrm... maybe I should just make a php helper function like <?php echo css_image('image_id','my text','image_url');?> to generate some code like this:
HTML
<div id="image_id" style="background-image:url('image_url')" class="image">
<img src="image_url" class="alt_text" alt="my text" />
<p>my text</p>
</div><!--/#my_image-->
then just attach some CSS in the stylesheet
#image_id{width:*image width*;height:*image height*}
.alt_text{position:absolute;top:0px;left:0px}
.image{display:block;background-position:left top}
.image p{position:absolute;left:-9999em}
it's an older technique that I'm using, not sure where I found it though. It works with CSS on/images off, CSS off/images on, CSS on/images on.
If a user with CSS off/images off visits, they'll see doubled up text. If a search engine spider visits, they'll see alt text and regular text, an intelligent spider could easily identify this for what it is, an innocent image replacement technique.
So, this technique is worst for screen readers, since alt text is read, but these users should be able to skip to the next paragraph, which is why I stuck <p></p> around "my text".
Everyone else with both CSS and images turned off is some kind of bot, right?
#menu ul li a {
display: block;
background-image: url(images/someimage.png);
text-indent: -9000px;
width: 454px;
height: 64px;
}
The display:block is important or else your width and height may not look right.
This is the code I use for replacing logo text with an image while keeping the text in the code but not shown to the user (this is Google approved). View the completed example here:
http://discretiondesigns.com/overflow/imagereplacement/
Here's the full code (images can be found at the above link - images can be varying sizes - the entire image is clickable and changes upon hover):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Replacement</title>
<style type="text/css">
<!--
#menu li { list-style: none; }
#menu #a { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; }
#menu #a a { background: url(http://discretiondesigns.com/overflow/imagereplacement/a_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; }
#menu #a a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/a_on.gif); }
#menu #a span { display: none; }
#menu #b { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; }
#menu #b a { background: url(http://discretiondesigns.com/overflow/imagereplacement/b_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; }
#menu #b a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/b_on.gif); }
#menu #b span { display: none; }
#menu #c { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; }
#menu #c a { background: url(http://discretiondesigns.com/overflow/imagereplacement/c_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; }
#menu #c a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/c_on.gif); }
#menu #c span { display: none; }
-->
</style>
</head>
<body>
<div id="menu">
<ul>
<li id="a"><span>Nav A</span></li>
<li id="b"><span>Nav B</span></li>
<li id="c"><span>Nav C</span></li>
</ul>
</div>
</body>
</html>
This is touted to work no matter the settings of css/images:
http://www.tjkdesign.com/articles/tip.asp
CSS Tricks has one of the most detailed posts on the subject here
They show various techniques. The one that solves your problem of css on and images off is:
HTML:
CSS Tricks has one of the most detailed pages on the subject here
They show various techniques. The one that solves your problem of css on and images off is the technique #8:
HTML:
<div id="menu">
<ul>
<li><span></span>Test</li>
<li><span></span>Tester</li>
</ul>
</div>
CSS:
#menu a {
width: 350px; height: 75px; /*your values here*/
position: relative;
}
#menu a span {
background: url("images/li.jpg"); /*your image here*/
position: absolute;
width: 100%;
height: 100%;
}
EDIT: Updated the code to the sample provided.
PS: I didn't test the code above.
CSS:
#menu ul li a{
display: block;
background-image: url(http://example.com/sprite.png);
width: 100px;
height: 50px;
}
#a {
background-position: <offset for sprite>;
}
#b {
background-position: <offset for sprite>;
}
#c {
background-position: <offset for sprite>;
}
HTML:
<div id="menu">
<ul>
<li id="a">Test</li>
<li id="b">Tester</li>
<li id="c">Testing Testing</li>
</ul>
</div>
Edit: added the link text back in... 'cause it was missed. :-)