I'm writing some html to be shown in the screen and sent by e-mail too (I'm making it with tables). I want to sepair the sections. I've tried putting some hr tags and it's seen properly in the navigators (Internet Explorer 9 and Firefox 10) and in the email managers (Outlook 2010, Hotmail and GMail). Well, if I print it (in the navigators) I don't see the hr tags. I have the same problem with a label whose background color is seen in the navigators and email managers but when the document is printed is not seen. (The css file is the same for showing in screen and for printing).
Thanks for your answers.
You can make an <hr> that's printable without changing browser settings like this:
hr {
display: block;
height: 1px;
background: transparent;
width: 100%;
border: none;
border-top: solid 1px #aaa;
}
caveat: I only tested in chrome.
The background not printing is a preference setting in your browser. It's off by default to save ink. But if the hr (or any construct) is white and is showing on the coloured background on your screen, you might want to switch this setting on.
Make printable without changing browser settings:
hr {
border-top: solid 1px #000 !important;
}
caveat: Tested in Chrome, Firefox, Microsoft Edge.
Related
Im having some issues with how the content on a website im designing is appearing.
The content was originally designed and working normally in chrome but when I open the site in firefox or chrome on android i get the following issue.
Screenshot in Chrome
Screenshot in Firefox
The site is being rendered exactly the same through the inputs have a black background and the main div appears to have a shadow over it.
If anyone has had a similar issue that they have been able to solve Id greatly appreciate it.
Looks like Firefox adds automatically a red border for :required fields.
If you want to override this behavior you can do:
input:required {
box-shadow: inherit;
}
I ended up doing
input:required {
box-shadow: inherit;
}
input:focus {
box-shadow: 0px 0px 2px 2px #7AA6ff;
}
to have a normalized behavior cross-browser.
Please check this fiddle
input {
border: 1px solid blue;
padding: 4px;
border-radius: 5px;
background: transparent;
}
It looks good in any browsers other than IE 11.
If you test it in IE11 you'll see that the border is broken (white pixels) at the beginning (top and bottom) just after rounded corners, like this:
What do I miss in my style declaration?
I am able to replicate this issue in IE 11 inside virtual box. It works correctly in Edge.
This is the only solution I could find to fix this issue:
Go to device manager and disable the default Virtual box display adaptor.
In my page layout I have two <div> tags. One, with id #image-panel and the other with #image-content-panel.
The two <div>s are stacked on top of each other using position: absolute. #image-content-panel (has higher z-index) is on top of #image-panel.
Both <div>s have background: transparent.
The page renders fine in Chrome, Safari, and Firefox i.e. I can see the image through the text (heading and paragraph etc.). But in IE (version 8) #image-content-panel is being redered with a white background.
You can see screenshots below:
Rendering in Crome, Safari, Mozilla
Rendering in IE 8
Relevant CSS and HTML code :
HTML Code
CSS Code
I'd like the page to render same in IE too.
Any help is appreciated.
Please propose an Alternative solution too if this can't be fixed.
UPDATE
The Jquery Cycle Plugin will add a background colour to elements in older versions of IE.
You need to set the cleartypeNoBg option to true in your Cycle initialisation.
$("#image-content-panel").cycle({
fx : 'scrollRight',
speed : 2700,
cleartypeNoBg: true
});
EDIT The below is not relevent
IE8 doesn't support rgba values and will fallback to a solid colour. If you don't define a fallback it will default to white which is what you are seeing.
There's a couple of ways to handle this.
1. Accept IE8's limitations.
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: rgb(0,0,0);
background: rgba(0,0,0,0.6);
margin: 10px 0 0 0;
}
#header will have a solid black background in browsers that don;t support rgba. Semi opaque in browsers that do.
2.Use a filter
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: rgba(0,0,0,0.6);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"
margin: 10px 0 0 0;
}
#header will have 60% transparent black background in IE8 and proper browsers. Personally, I hate using filters. They make your markup hideous and are difficult to maintain unless you are excellent at converting rgb to hex codes in your head (which I'm not). Also, this particular filter is IE8+. It will not work in IE7, though there are other filters that will work in IE6-7. You should also probably separate this out in to an IE8 specific stylesheet or use some other method to prevent IE9 from using the filter as IE9 supports rgba.
3.Use a 1px x 1px black, semi-transparent .png
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: url(background.png) repeat;
margin: 10px 0 0 0;
}
This is the route I usually go down simply because it's simple. It takes seconds to create a .png if you need to change the alpha and you don't need to worry about browser inconsistencies.
As others have said, IE8 doesn't support RGBA colour values.
There is a hack you can use to work around this though: I recommend trying out CSS3Pie on your site; it implements a number of modern CSS features into old versions of IE, including RGBA colours in backgrounds.
Hope that helps.
If I have 2 CSS styles that assign background images to an element, and one style overrides the other. Will both images be downloaded by the browser or just the overriding one?
I reason I'm asking is I recently attended a workshop on conditional stylesheets for mobile devices. If I override my normal bg images with smaller ones to save bandwidth, will the larger images be loaded anyway? This seemed to be what the guy was saying but it seems strange to me it would work this way.
It seems in some cases the answer is yes:
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
http://www.cloudfour.com/examples/mediaqueries/image-test/#t4
The overridden image will not be loaded.
Just to be clear, for example: http://jsfiddle.net/thirtydot/MjKfG/1/show/
<div id="test">test</div>
div {
background: url(http://dummyimage.com/600x400/000/fff)
}
#test {
background: url(http://dummyimage.com/200);
width: 200px;
height: 200px
}
Only http://dummyimage.com/200 will be loaded.
This is true in at least Chrome, Safari, Firefox, IE8/9, Opera.
I'd guess it's true in all browsers, because it's a simple and effective optimization.
The answer is NO. The first one was overridden won't load the background property. Why? Because browsers load your css file first before loading any other resources. They handle css files first then start loading images based on order and overriding order.
For example:
div {
border: solid 1px #000000;
background: url('images/sprites.png') no-repeat x y;
}
.mobile div {
border: solid 1px #000000;
background: url('images/sprites_mobile.png') no-repeat x y;
}
Browsers will process this css for your mobile to become like this:
div {
border: solid 1px #000000;
background: url('images/sprites_mobile.png') no-repeat x y;
}
And now, browsers already ignored the sprites_mobile.png for loading.
Can you not do an experiment and view the web log files to see what is happening?
Otherwise why not have a little PHP to select the appropriate style sheets depending on the device.
I am updating an IE6-era website so that cosmetic differences in modern (IE8, Firefox 4 in this scenario) browsers are eliminated, or at least reduced.
We've ran into an issue with buttons, which are styled using background-color: #EFEFEF; and border: 1px. In IE6 this border setting neatly reduces the border on buttons.
However, in IE8 and Firefox 4 setting a CSS style of border: 1px completely removes the border.
I've tried using border_SIDE_color to set the color of the relevant sides of the button appropriately but this has no impact.
What approach should I use instead? This is a large legacy website, containing many buttons so I am looking for a CSS-only solution, if one exists. Forcing IE8 into compatibility mode is also not an option.
Try setting border-style: outset;. Or use the shorthand version with the other styles you're already using:
.mybutton {
border: outset #EFEFEF 1px;
}