Log in

View Full Version : css conditional statement


creative creator
04-14-2010, 06:26 AM
hi friends,
i am new to this forums, i have small query if anyone can help that would be gr8:)

when i place CSS conditional statement for ie(separate CSS), in the plain HTML it's working fine but while you make the total website dynamic, then the conditional statement is not working, it means when i made dynamic in Mozilla the design looks good but in IE fully collapsed, if i removed the conditional statement comments in IE also it looks good, but still i didn't get the prob, is this correct what i did(removing comments).please help me in this.
djr33
04-14-2010, 06:49 AM
Can you link to your page? It's hard to figure out what's happening without that.
creative creator
04-14-2010, 07:06 AM
i am unable to give the link,can you clear about the conditional statement.
djr33
04-14-2010, 05:30 PM
Not without more information. I don't understand what you are saying. We will need to see an example. If you can't post a link, post some code and maybe that will explain it.
BLiZZaRD
04-14-2010, 06:22 PM
You probably had the wrong link set up. When you had it static it was direct linked. Then after moving to dynamic you probably either moved the CSS and forgot to update the link rel, or typo-ed the link rel and IE went looking for a css file that didn't exist.
creative creator
04-20-2010, 09:07 AM
ok..well it's working fine now..10x for your help.
creative creator
04-20-2010, 09:19 AM
Hi friends,

I have one more query regarding the css writing structure.

i saw in some css file they written like this

.article-teaser .image .icon-multimedia,
.multimedia-teaser .item .icon-multimedia {
position: absolute;
top: 0;
right: 0;
}

.article-teaser-with-image .caption {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
}

so here we are using parent(class) -->child(class) --> Sub-child(class) is this mandatory to write like this, can you clear about this.
BLiZZaRD
04-20-2010, 06:25 PM
When nesting you need to provide the exact placement of what you want. If Parent controls child control sub and you want to change something in the sub, you will need to list all of them as such.

Otherwise if you have many items (IDs or classes) that are going to have the same attributes you can list all of them that way and only list the attributes once, instead of re-writing each attribute for each item.
creative creator
04-28-2010, 08:55 AM
Hi,

i have one more query, i write some code for uploading, for this i write html code like below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test File</title>
<style type="text/css">

.textbox
{
border: 1px solid black;
background-color: red;
}

</style>
</head>
<body>
<form action="#">
<input type="file" class="textbox" />
</form>
</body>
</html>

in IE it's coming perfectly but in Mozilla the styles are not applying to text box
default text box is showing in Firefox..can you help in this issue.
BLiZZaRD
04-28-2010, 08:37 PM
input is a integrated format within css, no class or ID is needed.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test File</title>
<style type="text/css">

input {
border: 1px solid black;
background-color: red;
}

</style>
</head>
<body>
<form action="#">
<input type="file" />
</form>
</body>
</html>


Should do it.
creative creator
04-30-2010, 05:09 AM
But in firefox it's not showing the background color red and border black, the default text box is showing..i want same like in IE.
BLiZZaRD
04-30-2010, 08:33 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test File</title>
<style type="text/css">

input {
border: 1px solid black;
background-color: red;
}

</style>
</head>
<body>
<form action="#">
<input type="file" style="color: #000; background-color: #FF0000; border: 1px solid #000" />
</form>
</body>
</html>


If that doesn't work see this page (http://www.quirksmode.org/dom/inputfile.html)
creative creator
05-10-2010, 06:15 AM
hi folks,

i wrote style like this

.content{
font-weight:bold;
color:#003366;
font-family:Arial;
font-size:12px;
}
.content:first-letter{
text-transform:uppercase;
}

<div>
<p class="content">your message is saved</p>

i want first letter should be capitalize.

it's working in IE 7, but it's not working in Firefox 3..can you help in that.
danidallia123
05-13-2010, 01:48 PM
We all know that bugfixing Internet Explorer for Windows is a headache. Fortunately there is one easy way to get around most problems.

You can create a conditional statement in your html to import a style sheet just for IE. Basically, what you do is create your main CSS file that styles the site for modern browsers and than you create a separate CSS file to override the statements in the main CSS file just for IE.

This CSS file is only loaded if the detected browser is IE, otherwise it won't. You should put this conditional statement into the head of your html file after every other CSS import code. It should be the last in the list, so that it overwrites the main css files:
<!--[if IE]> <style type="text/css">@import "IE-override.css";</style> <![endif]-->

Now if for example you had a statement in your main.css file: #logo { margin:10px } and it doesn't work properly in IE, you can add the same statement with a different value in your IE-override.css file: #logo { margin:20px }.

And this way you will have a 10px margin in Safari and 20px margin in IE. You have full control over IE this way.

Web Design Chennai ( http://www.websitedesignerschennai.com)