Using current CSS and not CSS3, is there any way of specifying a raised type border style? I would like to somehow emphasize my menu. Basically I am after a border that has has a rounded edge, not rounded corners.
With CSS 2.1 and prior you can use double, ridge, groove, inset, or outset. I've put together a simple demo file for you to play around with and test the various border styles available to you.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Border Styles</title>
<style type="text/css" media="screen">
body { background: #999; }
div { background: #eee; float: left; margin: 10px; padding: 10px; height: 100px; width: 100px; }
.double { border: 4px double #ccc; }
.ridge { border: 4px ridge #ccc; }
.groove { border: 4px groove #ccc; }
.inset { border: 4px inset #ccc; }
.outset { border: 4px outset #ccc; }
</style>
</head>
<body>
<div class="double">double</div>
<div class="ridge">ridge</div>
<div class="groove">groove</div>
<div class="inset">inset</div>
<div class="outset">outset</div>
</body>
</html>
You cannot make a rounded-corner without the CSS3 spec border-radius property. If you want to do this you should use a script like Modernizr to provide alternate support for browsers that cannot support CSS3.
Not without images. And CSS3 could be called current CSS, at least in implemenation with WebKit and to a lesser extent Gecko.
IE is playing slow paced catch up too :)
You could try and make a raised border by having a few child elements, all with a border and with a lighter shade of colour as you reach the outside border.
Also, you can cause 1px notched corners too with negative margins and CSS. It can also be argued you can make rounded borders without border-radius, but the HTML and CSS are quite horrendous (think of all the child elements with negative margins etc)
Related
So I'm having an issue with consistent sizing of "em" values and I can't seem to figure out why.
I am using SCSS for my site and preprocessing all my SCSS files to a single CSS file.
Let me illustrate how my structure is set up.
/* Value used for border width
$defaultBorderWidth: $sizeSmallest; */
.test {
width: 5em;
height: 5em;
border-style: solid;
border-width: 0.15em; /* normally $defaultBorderWidth */
}
.test div {
width: 1em;
height: 1em;
border-style: solid;
border-width: 0.15em; /* normally $defaultBorderWidth */
}
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">
</head>
<body>
<div class="test">
<div></div>
</div>
</body>
</html>
This in turn shows the result I am expecting, which is a 2px border on both div tags. I am able to replicate this on my site in exactly the same way.
My issue is that in some of my widgets, there are instances where I get a 3px border instead of 2px.
I've read that my border-width could be cascading with another attribute value, but for the life of me can't figure out where or why it's happening. When I look at the developer tools in my browsers I see all instances of border-width are 0.15em.
If an explanation / debug cannot be determined, I can provide a live site example, with the expectation that it will be corrected on the live site ( FYI for future viewers of this article ).
since095 provided the answer to use rem as opposed to em. Where rem always uses the root default font size of the <html> tag (which you can override), in contrast em uses the current tag font size and adjusts other em values accordingly (good for inheritance).
There are advantages and disadvantages of both, and it really comes down to how you intend to structure your site. Inheritance can get messy and complicated really fast, but if used correctly can be very powerful. Controlling every aspect of your site with uniform measurements can help streamline and simplify, but doesn't carry the power of inheritance.
I've come across those that suggest a combination of the two, using rem to set constants such as font size, borders, and em for spacing such as margins and padding.
Below is an example of the use of using rem and em.
.testRem h1 {
border-style: solid;
font-size: 3rem;
width: 15rem;
height: 3rem;
margin: 0.5rem;
border-width: 0.5rem;
}
.testEm h1 {
border-style: solid;
font-size: 3em;
width: 5em;
height: 3em;
margin: 0.5em;
border-width: 0.5em;
}
<!doctype html>
<html>
<head>
</head>
<body>
<div class="testRem">
<h1>Test rem</h1>
<div class="testEm">
<h1>Test em</h1>
</div>
</body>
</html>
I created a beautiful faux legend for a box that surrounds some text: jsfiddle. However, my solution uses :before and :after pseudo classes, which won't work in IE 7 and IE 8. Bummer.
So I decided I would set out to try to define my own spans to use in the place of the :before and :after pseudo classes. Unfortunately, my solution seems to work for the :before replacement, but not the :after replacement: jsfiddle. Also, the contents of the box have been shifted upwards for some inexplicable reason.
Is it possible to accomplish what I am doing through CSS and HTML alone? I don't want to bring any Javascript or jQuery into the mix.
Thanks!
http://www.webdevout.net/test?01&raw:
<!doctype html>
<html>
<head>
<title></title>
<style>
html {
overflow-y: scroll;
background: #ff3366;
font: 16px serif;
}
fieldset {
border: 3px solid #ffc2d1;
}
legend {
background: url(http://img820.imageshack.us/img820/4242/spritearrowdown.png) no-repeat 3px 50%;
padding: 0 0 0 13px;
}
html > /**/ body
legend { /* if the way it looks in IE8 really bothers you: */
position: relative;
right: -13px;
}
</style>
</head>
<body>
<form action="foo">
<fieldset>
<legend>Model Forecast Guidance</legend>
Fieldset
</fieldset>
</form>
</body>
</html>
Does someone know why there is a margin (about 1px) around the button background-image, only in Internet Explorer ?
Try this code in IE vs Firefox :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<style type='text/css'>
button {
background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x;
border: 1px solid black;
font-size: 24px;
}
</style>
</head>
<body>
<button>LOL</button>
</body>
</html>
Here is how it is displayed on my computer in IE9 (in big size) :
Notice : If I remove the (black) border, the margin disappears.
Thanks.
Differnet browsers have different definitions of the button tag (and other tags). In fact, Chrome have a margin of 2px. You can easily solved it by making margin explicit:
button {
background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x;
border: 1px solid black;
font-size: 24px;
margin: 0; /* or ex 1px */
}
Update:
I think it is the font-family (or the rendering of it) which is different, try:
button {
background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x;
border: 1px solid black;
font-size: 24px;
/* To get it exact */
margin: 0; /* or ex 1px */
padding: 0; /* or ex 1px */
font-family: Consolas;
}
Update:
Without <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> I can reproduce the problem. And in this case IE is running in Quirks mode. Do you include the doctype when you test it?
Anyway, you just have to avoid quirks mode: http://www.google.dk/search?aq=0&oq=avoid+qui&gcx=c&sourceid=chrome&ie=UTF-8&q=avoid+quirks+mode
Ex avoid ANYTHING before doctype.
I didn't faced such problem with your code, probably this is because you ie version is older one.
Different browsers have different generic style standards for different html elements. To avoid this problem (or defend against it the best you can!) you should really include a reset style sheet in all your sites to try and synchronise the styles of all browsers best you can. One of the greats I have found is Erics Archived thoughts:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
This typically does the trick (with a few little tweaks after a penultimate cross browser test).
Can someone else take a look at this code and either confirm that this is an IE9 bug or tell me what I am doing wrong? With the following HTML code. The bottom border of the button will render the same color as the text even though a border color of red is defined. IE8 and every other browser on the planet renders this OK. Make sure that IE9 is rendering in standards mode.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
button.button {
color: blue;
border: 0px;
border-bottom: #FF0000 2px solid;
}
</style>
</head>
<body>
<button type="button" class="button">Update</button>
</body>
</html>
So far the only fix I've found for this is to redeclare a border color for all sides at the bottom of the style.
border-color: #FF0000;
dont know it if helps checked it out its fine for me
use this
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
button {
border:0;
}
.update {
color: blue;
border-bottom: 2px #FF0000 solid;
display: block;
outline:none;
}
</style>
</head>
<body>
<button type="button" class="update">Update</button>
</body>
</html>
and if you accept my opinion, dont use tag names as class name
Given the following markup
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div.apartBox
{
padding:12px;
background: #FFFFFF;
border: solid 1px #6182A3;
}
.browser
{
background: #fff;
border: solid 1px #0055E3;
border-top: solid 12px #0055E3;
border-bottom: solid 4px #7A99C5;
padding:10px 10px 8px 14px;
color: #333;
font: 0.8em/1 arial;
margin: 8px 20px;
}
.callout
{
background: #EEF2F0;
border: solid 1px #9CC7C0;
padding:8px;
}
</style>
</head>
<BODY>
<div class="apartBox" id="subPopout" style="Z-INDEX: 2; WIDTH: 400px; POSITION: relative">
<div id="upSubPop">
<div class="callout" id="subDetails">
<div class="browser">
<span id="txtExample">Me afecta que digan que soy incapaz.</span>
</div>
</div>
</div>
</div>
</BODY></HTML>
The styles from the css .browser and .callout are not visible in IE6 unless I manually remove the position:relative style from subPopout. This div is generated automatically from a modal popup so I unfortunately can't touch this style. It displays fine in FF. If I select the .browser div with my mouse, it displays when I unselect it!
Why are these styles not visible in IE6
To be short, because it's IE6!
Can the box have a fixed height?
If yes, a possible solution would be to set a fixed size to upSubPop element. For example, if you add:
div#upSubPop{background:red;height:500px;}
to your stylesheet, the blue borders are displayed correctly in IE6.
Another workaround would be to set the height of <div class="browser" style="height:1px;" /> to 1 pixel. In this case, IE6 displays the element with appropriate height based on contents (so you will see the whole "Me afecta que digan que soy incapaz." message. The problem is that the real browsers as FF will then display everything incorrectly (to be more precise, the message will overlap the bottom border). So in this case, you can use conditional CSS to ensure that your message block is displayed as required both in real browsers and in IE6.