Alternative to pseudo classes? - css

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>

Related

Div layout in the head of an HTML page [duplicate]

<div class="HeaderLink" id="Home">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MDB1</title>
<link rel="stylesheet" type="text/css" href="Index.css" />
</head>
<body id="HeaderFive">
<div class="HeadPanelElement" lang="en" id="HeadPanel"> Blog
Videos
Home
Contact
About MDB1 </div>
</body>
</html>
</div>
#charset "utf-8";
/* CSS Document */
.HeadPanelElement{
position: absolute;
width: 10%;
left: -10%;
}
#HeadPanel{
left: 15%;
width: 100%;
height: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
border: dashed;
border-color: #C00;
border-width: 2px;
font-size: 1em;
Intentions are for the page to layout like this
Why aren't the position attributes working?
quick to do ...
#HeadPanel
{
display: inline;
width: 100%;
}
.HeadPanelElement
{
width: 10%;
/* or
padding: 10px; */
}
the real factor here is the display: inline; which will layout the div in a side by side fashion.
You are using 'left:' but you didn't include 'position:absolute'? Try that maybe it might help.
position: absolute; will help you get that interesting layout.
For declarations like left and top to make any sense, you need to apply them to positioned elements:
#foo {
position:absolute;
top:10%;
left:25%;
}
Your elements don't appear to have be positioned as absolute or relative.
There are many other problems with your markup as well that will cause many, many problems. All of your markup should go within the body tag:
<!DOCTYPE html>
<html>
<head>
<title>Foo Example</title>
<style type="text/css">
#foo {
position:absolute;
top:10%; left:10%;
background:yellow;
padding:10px 20px;
border:1px solid #000;
color:#000;
width:30%
}
</style>
</head>
<body>
<!-- all markup goes here -->
<div id="foo">Hello World</div>
<!-- all markup goes here -->
</body>
</html>
Online Demo: http://jsbin.com/efukol/edit
There are a few things going on here:
The A element is inline, and things will sit right next to each other, like BlogVideosHomeContactAbout MDB1, as I am sure you have already seen.
This LOOKS like a list or menu, so use the appropriate markup. List markup would be best, or if you want to try HTML5, there is already the NAV element with is specifically for that purpose.
I notice that you are not using URLs in the a elements. It is better to use something which will not generate a 404 on the server.
Why are you bothering with target="_self" unless you are using frames, and if that is the case, please Google for Frames are Evil. If not, then A) _self is redundant, B) if you are using a Strict doctype, the target attribute is deprecated for accessibility reasons.
Naming your CSS file index.css might get you in trouble if the server is configured to use index. with ANY suffix to as the default page. Better would be something like style.css.
Now to get these things going across, you can go a few ways:
/* CSS using line list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:inline; padding:.25em 1em .25em 1em}
/* CSS using floats list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:block;float:left;margin: 0 .1em 0 .1em;padding:.25em;}
#HeadPanel ul li a {display:block; /*what ever else you want to do */}

Position elements with the div tag

<div class="HeaderLink" id="Home">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MDB1</title>
<link rel="stylesheet" type="text/css" href="Index.css" />
</head>
<body id="HeaderFive">
<div class="HeadPanelElement" lang="en" id="HeadPanel"> Blog
Videos
Home
Contact
About MDB1 </div>
</body>
</html>
</div>
#charset "utf-8";
/* CSS Document */
.HeadPanelElement{
position: absolute;
width: 10%;
left: -10%;
}
#HeadPanel{
left: 15%;
width: 100%;
height: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
border: dashed;
border-color: #C00;
border-width: 2px;
font-size: 1em;
Intentions are for the page to layout like this
Why aren't the position attributes working?
quick to do ...
#HeadPanel
{
display: inline;
width: 100%;
}
.HeadPanelElement
{
width: 10%;
/* or
padding: 10px; */
}
the real factor here is the display: inline; which will layout the div in a side by side fashion.
You are using 'left:' but you didn't include 'position:absolute'? Try that maybe it might help.
position: absolute; will help you get that interesting layout.
For declarations like left and top to make any sense, you need to apply them to positioned elements:
#foo {
position:absolute;
top:10%;
left:25%;
}
Your elements don't appear to have be positioned as absolute or relative.
There are many other problems with your markup as well that will cause many, many problems. All of your markup should go within the body tag:
<!DOCTYPE html>
<html>
<head>
<title>Foo Example</title>
<style type="text/css">
#foo {
position:absolute;
top:10%; left:10%;
background:yellow;
padding:10px 20px;
border:1px solid #000;
color:#000;
width:30%
}
</style>
</head>
<body>
<!-- all markup goes here -->
<div id="foo">Hello World</div>
<!-- all markup goes here -->
</body>
</html>
Online Demo: http://jsbin.com/efukol/edit
There are a few things going on here:
The A element is inline, and things will sit right next to each other, like BlogVideosHomeContactAbout MDB1, as I am sure you have already seen.
This LOOKS like a list or menu, so use the appropriate markup. List markup would be best, or if you want to try HTML5, there is already the NAV element with is specifically for that purpose.
I notice that you are not using URLs in the a elements. It is better to use something which will not generate a 404 on the server.
Why are you bothering with target="_self" unless you are using frames, and if that is the case, please Google for Frames are Evil. If not, then A) _self is redundant, B) if you are using a Strict doctype, the target attribute is deprecated for accessibility reasons.
Naming your CSS file index.css might get you in trouble if the server is configured to use index. with ANY suffix to as the default page. Better would be something like style.css.
Now to get these things going across, you can go a few ways:
/* CSS using line list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:inline; padding:.25em 1em .25em 1em}
/* CSS using floats list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:block;float:left;margin: 0 .1em 0 .1em;padding:.25em;}
#HeadPanel ul li a {display:block; /*what ever else you want to do */}

CSS raised border using CSS2

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)

Why are these styles not visible in IE6

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.

replace image through css

I'm writing code in Stylish, a firefox plugin, to change the image that is showing up.
The image property doesn't have a div tag, so I have to use this:
img[src*="s_dschjungelplanet"]{
##########
}
So this will replace "s_dschjungelplanet" anywhere in the page, in a img src.
So my main problem is that I'm not sure HOW to tell it to replace the src="xxx".
Ta for replies
There is no easy way. I think you'd be better of with greasemonkey scripts, as with a simple such script you can change the url.
As far as I know, you can not change the url with css only. This was the closest I was able to come with css only:
img[src*="s_dschjungelplanet"]{
width:0;
height:70px;
padding-right:250px;
background:transparent url(http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png) top left no-repeat;
}
You can try this:
img[src*="s_dschjungelplanet"]{
content: url("myfavorite.png");
}
Works in Chrome, not in Firefox...
img[src*="http://url-of-image-to-be-replaced.jpg"]{
background-image: url("https://url-of-image-you-want-to-display.jpg");
width:38px;
display:inline-block;
padding:38px 0 0 0;
height: 0px}
Change the width and padding to your specs. It's worked for me.
replace the img src
.image-replacement {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(https://www.whatsappimages.in/wp-content/uploads/2021/07/Top-HD-sad-quotes-for-whatsapp-status-in-hindi-Pics-Images-Download-Free.gif)
no-repeat;
width: 180px;
height: 236px;
padding-left: 180px;
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Image replaced with Image</h2>
<img class="image-replacement" src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80" />
</body>
</html>

Resources