CSS - Ie5 Filters Affecting Table Sizes

i have two p tags one after the other..

<p>text</p>
<p>text</p>

and I did:
Code:

#head p {
        float:left;
        margin-top:2%;
        font-style:oblique;
        font-size:150%;
        color:green;
    }
  #head p+p {
        float:right;
        font-size:75%;
        color:red;
   }

the problem is that if i do margin-top:4% to the first p; this also changes that in the adjacent p? is this correct?

I currently making a website to learn about web design and I have made a javascript selection menu which displays perfectly when the code is on a page on its own:

http://www.ukhomefurniture.co.uk/test/mouseovertest.php

However, when I implant the same code on the full page on which I want it to appear it goes haywire with large gaps all over place, I have managed to get it down to a small gap between the top menu and splash image. A colleague I work with suggests it may be down to the PHP affecting. Can anyone advise how I can fix it so the gap is removed:

http://www.ukhomefurniture.co.uk/test/indextest.php

Friends,

I have been developing a website in IE, and I've been using the dropshadow filter in CSS from Microsoft on a few of my <DIV>'s. All was well. Today I was introduced to Firefox - I like it, but my CSS filters are not rendered in firefox. Is this an additional that is yet to be made to the new rookie browser?

Jonathan

filter:alpha(Opacity=50); works in IE

what can i use to get this same effect for Netscape, and other browswers across the board ?

I viewed several examples of use of CSS filters like blur wave mask etc with various browsers but none reflected the changes, how come ?

After months of scrutinizing different layouts for http://what-is-what.com, I've pretty much settled on modifying a layout that I found at this address:
http://www.positioniseverything.net...example/borders

I'm having a problem with arranging the header without using tables. The site logo should be on the far left side, and to the right of it a search form. When I float the logo left, the content of the page left aligns itself with the right edge of the logo. My test code (displaying this problem) can be found he
http://what-is-what.com/tests/june2007-leftalign.html

How can I have the float not affect the rest of the page?

I'm currently going through these tutorials to learn more about floats:
http://www.brainjar.com/css/positioning/
http://www.westciv.com/style_master...yout/index.html

I'm led to believe that I must use "clear", but I'm not sure where.

Below is a sample of my CSS page, I'm having an issue with the floats that are commented out, they are affecting my th even though I haven't actually classed anything in my html... Any ideas?

<code>
/* CSS Document */

body {
margin: 0;
padding: 0;
background-color: #000;
color: white;
font-family: "Lucida Grande";
font-size: x-small;
}
table.outer {
border:1px solid #fff;
width: 178px;
}
/*.left {
float: left;
}
.right {
float: right;
}*/
table {
clear: right;
width: 700px;
line-height: 1.4em;
border-collapse: collapse;
border: 1px solid #000;
color: white;
background: #000;
font-family: "Lucida Grande";
font-size: x-small;
}</code>

Hi everyone,

So I've been coding for years and had drawn away for the design/css part, so I need some refreshing. I've tried the greater than / less than "operators" between selectors in my css declaration but to no avail. Basically what I want to do is example:

Code:

<form><!-- really doing this basic just to show the point -->
<fieldset>
   <!-- inputs here -->
</fieldset>
<fieldset>
   <fieldset><!-- ### nested fieldset inside fieldset, don't want to affect these child selectors -->
      <!-- input bla -->
   </fieldset>
</fieldset>
</form>

So as you can see in my brief exampl above, there's two parent selectors and one child inside the second one. I only want to change the properties of the parent ones, so that a fieldset INSIDE a fieldset doesn't get affected, and I was hoping anyone here might be able to shed some light on how to achieve this.

Many thanks

I have an index.php page which has a <link> to style.css. The style is applied just fine to content in index.php, but if index.php includes content from other php files using include(); statements, this included output ignores the stylesheet.

I have tried putting a <link> to the stylesheet in the included php files, but this does nothing. Can anyone help? Thanks!

Code:

<link rel="stylesheet" type="text/css" href="style.css" />

I used a script from Dynamic Drive that allows the user to change font on demand (They can size up/down the font on the website). But I ran into problems in that this spilled over to increasing the fontsize of the links (only A but not not rollover). I would prefer that the links are not affected by this script. I would rather the links stay with the sizes I specified in the CSS.

Please see the website here to understand what my problem is: nudipu.org.ug/nsites. My intension was to make it as perfect as it is on their sister site add.org.uk

Can somebody advise me please? The script I used is located on http://www.dynamicdrive.com/dynamicindex9/textsizer.htm

Thank you folks.

Hi Folks,

I've implemented a custom underline for all text links using background properties, but have found that my linked transparent PNG images are now affected with the underline as well.

I've tried correcting this by applying background-image:none; to the affected PNGs -- I even used !important;. No luck. I also saw some mention of using the display:block; property to correct a similar problem. No luck.

Suggestions?

Thanks in advance!

P.S. I was all set to post a link to a live example, but it seems new users can't post links? Hopefully the above description will suffice.

please please somebody help me with this...
i have given my links some effects with this code:

Code:

<style type="text/css">
<!--
a img {border: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; border-bottom:3px double; color: #000000;}

a.head,
a.head:link { text-decoration: none; }
a.head:hover { text-decoration: none; }
//-->
</style>

it works fine on my links, but the class "head" doesn't seem to be effecting the link with that class....it still has the same hover effect as the other links. I have class="head" in the link tag of the element, but it still doesn't work. I want no effect on this link since it is an image and I don't want a double-underline on it. The only thing I can think of is that maybe the head image isnt being effected correctly because it is an include file, but I don't think that really matters.

Thanks!

http://m-i-x.net/beta

basicly i want the 2 sides heights to be the same as the height of the content...how can i do it?

I have an absolutely positioned login form that I am having some troubles with...

On IE7 and the latest version of Fx it looks great.

In some older versions of Fx (1.04 is what I have to test with...), the input size is off compared to the width of the div... And in IE6, the email input is actually wider than the password input (which is really weird since the inputs are set to a size of 25)

Is there a better way to do this... What I want is to have the input fields the same width, with the submit button aligned along the right edge and to have the labels of the input fields aligned left. Or, if I am doing it the right way, what's the deal with IE6?

I'm not too worried about the older Fx versions since it doesn't look all that bad, but on some computers with IE6, the box actually starts to push too far to the right for some reason...

Hi, I'm new to CSS and am trying to deign a navigation bar for a website. The problem that i face is trying to size the headings a little larger than the sub catagories.
The code is as follows for the style sheet i have tried this:
body{
font-family: Arial,sans-serif;
color: #FFFFFF;
line-height: 1.1;
margin: 0px;
padding: 0px;
}

a{
color: #FFFFFF;
text-decoration: none;
}

a:link{
color: #FFFFFF;
text-decoration: none;
}

a:visited{
color: #FFFFFF;
text-decoration: none;
}

a:hover{
color: #FFFFFF;
text-decoration: underline;
}
b{
color: #FFFFFF;
text-decoration: none;
}
b:link{
color: #FFFFFF;
text-decoration: none;
}

b:visited{
color: #FFFFFF;
text-decoration: none;
}

b:hover{
color: #FFFFFF;
text-decoration: underline;
}
#navBar ul b:link, #navBar ul b:visited {display: block;}
#navBar ul a:link, #navBar ul a:visited {display: block;}

#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}




/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #0033CC;
font-size: 70%;
background-color: #112059;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;

}

#sectionLinks a:hover{
background-color: #0033CC;
}

#sectionLinks2{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #0033CC;
font-size: 130%;
background-color: #112059;
}


#sectionLinks b {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
/*font-size: 130%;*/
}

#sectionLinks b:hover{
background-color: #0033CC;

}

and i have the following code in the htm page:


<STYLE>
BODY {
scrollbar-arrow-color:094588;
scrollbar-shadow-color:f0f0f0;
scrollbar-face-color:f0f0f0;
scrollbar-highlight-color:094588;
scrollbar-darkshadow-color:094588;
.style1 {font-size: 16px; background-color: #112059;
background-color: #FFFFFF;
}
a:hover {
color: #FFFFFF;
}
.style1 {color: #FFFFFF}
b:hover {
color: #FFFFFF;
}.style1 {color: #FFFFFF}
</STYLE>

<div id="navBar">
<div id="sectionLinks">
<div id="sectionLinks2">

<h3 class="style1">Menu</h3>
<ul>
<li><b href="index.htm">Home</b></li>
<li><b href="product.htm">Products</b></li>
<li><a href="index.htm">Computer Systems</a></li>
<li><a href="products.htm">Components/Peripherals</a></li>
<li><a href="#">Laptops</a></li>
<li><a href="#">Refurbished</a></li>
<li><b href="services.htm">Services</b></li>
<li><a href="#">PC Repairs</a></li>
<li><a href="#">Upgrades</a></li>
<li><a href="#">Home Networking</a></li>
<li><a href="#">In-home training</a></li>
</ul>
</div>
</div>
</div>

However this only allows hyper links to work that are defined under a href not the larger b href as I so want,
I know this is complicated and long winded but can anyone lend some usefull solution to my problem?
Yours greatfully.