|
CSS - Ie Problem...doesn't Apply Css To Half Of Website
This is messed up....it's not the javascript cause i deleted it and it still continued...it's not the includes cause i put everything on one file....it's not the <link> cause i put it in <style> tags and it still continued
http://66.195.240.220/~majdkgf/cip/ it works PERFECT in Firefox...not in Internet Explorer Similar TutorialsExactly that question. I got this menu from a website. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" media="all" type="text/css" href="http://www.cssplay.co.uk/css/menus.css" />
<title>Godly Menus</title>
<style type="text/css">
#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:360px; background:#000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}
#menu li.sub {background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px;
text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}
#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}
#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}
#menu :hover {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat;
z-index:500; white-space:nowrap;}
#menu :hover > a {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat;
z-index:500; white-space:nowrap;}
#menu :hover ul {position:static; height:180px; margin-top:-1px; background:#383838;}
#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px
solid #fff;}
#menu :hover ul li, #menu :hover ul li a {background:#383838; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #383838 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px
center;}
#menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat
120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat
120px center; color:#ff0;}
#menu :hover ul :hover ul li,
#menu :hover ul :hover ul li a
{background:#666;}
#menu :hover ul :hover ul :hover ul li {background:#666; z-index:500;}
#menu :hover ul :hover ul li.fly a {background: #626262 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#0d72c0; color:#ff0;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul :hover ul li,
#menu :hover ul :hover ul :hover ul li a {background:#888;}
#menu :hover ul :hover ul :hover ul :hover {background:#5184b8; color:#ff0;}
#menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}
.menu_text {float:left; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;}
.menu_text img {display:block;}
.menu_text p {margin:0; padding:5px 10px; line-height:15px;}
</style>
</head>
<body>
<div id="info">
<ul id="menu">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Privacy Policy</a></li>
<li class="sub"><a href="#nogo">Types<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">European</a></li>
<li><a href="#nogo">Indian</a></li>
<li><a href="#nogo">North Africa</a></li>
<li class="fly"><a href="#nogo">American<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">South American</a></li>
<li class="fly"><a href="#nogo">North American<!--[if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Grey tree frog</a></li>
<li><a href="#nogo">Green tree frog</a></li>
<li><a href="#nogo">Spring peeper</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#nogo">Japanese</a></li>
<li><a href="#nogo">Chinese</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Classifications<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="fly"><a href="#nogo">Pelodryadinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cyclorana</a></li>
<li><a href="#nogo">Litoria</a></li>
<li><a href="#nogo">Nyctimystes</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo7">Phyllomedusinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Agalychnis</a></li>
<li><a href="#nogo">Cruziohyla</a></li>
<li><a href="#nogo">Hylomantis</a></li>
<li><a href="#nogo">Pachymedusa</a></li>
<li><a href="#nogo">Phasmahyla</a></li>
<li><a href="#nogo">Phrynomedusa</a></li>
<li><a href="#nogo">Phyllomedusa</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hemiphractinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cryptobatrachus</a></li>
<li><a href="#nogo">Flectonotus</a></li>
<li><a href="#nogo">Gastrotheca</a></li>
<li><a href="#nogo">Hemiphractus</a></li>
<li><a href="#nogo">Stefania</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hylinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Acris</a></li>
<li><a href="#nogo">Anotheca</a></li>
<li><a href="#nogo">Bokermannohyla</a></li>
<li><a href="#nogo">Corythomantis</a></li>
<li><a href="#nogo">Ecnomiohyla</a></li>
<li><a href="#nogo">Hyloscirtus</a></li>
<li><a href="#nogo">Megastomatohyla</a></li>
<li><a href="#nogo">Osteocephalus</a></li>
<li><a href="#nogo">Pseudacris</a></li>
<li><a href="#nogo">Sphaenorhynchus</a></li>
<li><a href="#nogo">Trachycephalus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo9">Rhacophorinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Boophis</a></li>
<li><a href="#nogo">Callixalus</a></li>
<li><a href="#nogo">Chiromantis</a></li>
<li><a href="#nogo">Cryptothylax</a></li>
<li><a href="#nogo">Mantidactylus</a></li>
<li><a href="#nogo">Rhacophorus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Buergeriinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Buergeria</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">References<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li>
<li><a href="#nogo11">Encyclopedia</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Links<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Complete treefrog</a></li>
<li><a href="#nogo">Old World treefrogs</a></li>
<li><a href="#nogo">Amphibian Species</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<div class="menu_text"><img src="http://www.cssplay.co.uk/menus/slide_fly/slide/frog.jpg" alt="tree frog" title="" />
<p>Tree frogs are frogs of the families Hylidae and Rhacophoridae.</p>
<p>There is large variation among tree frog species. Many species are not actually arboreal (do not live in trees), but
terrestrial or aquatic (live on the ground or in the water).</p>
<p>Many arboreal frogs are green, while terrestrial and aquatic species are duller.</p>
<p>They mostly feed on insects and other invertebrates, but some larger species can feed on small vertebrates. The species
within the genus Cyclorana are burrowing frogs, sometimes spending many years underground.</p>
</div>
</div>
</body>
</html>
Any anyway, if I take out the <link> it dissapears!! The CSS in it has nothing to do with the image. Here is the CSS in the <link> tag. Code: #showcase {background:#6f9c6f;}
dl.menus_list dt {background:#6f9c6f; font-size:1.5em; margin:3px 0;}
#foot {background:#8fbc8f;}
dl.menus_list dd.nil {padding:0; margin:0;}
I hate to say it but I'm baffled! Goal: Get all the CSS into the same file as the rest of my code. Edit: Gah kravvitz I've been watching your move through your profile and you signed off!! Gay. Well I hope someone else here can help me solve this issue I'm having... Here's the code (it's all in the one file). (I had a link but I'm too new here) Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=ISO-8859-1"></meta>
<title> image border bug test</title>
</head>
<body onload="highlightimg()">
<div id="container">
<a class="aclass" ><img src="a.jpg" id="i1" alt="alttext"/></a>
<a class="aclass" ><img src="b.jpg" id="i2" alt="alttext"/></a>
<a class="aclass" ><img src="c.jpg" id="i3" alt="alttext"/></a>
</div>
<script type="text/javascript">
function highlightimg(){
document.getElementById('i2').setAttribute('style','border-width: 3px 3px 3px 3px; border-color:red;border-style: solid;');
}
</script>
</body>
</html>
Internet explorer refuses to apply the border style to the center (or either of the other) images. Any thoughts? (This is a small test case, the style must be applied with js in the actual application I'm building). Hello.. I've been working on this site for my Daughter using Wordpress, I've mashed about the CSS, Modding a template for the desired look for the site. I've tied validating it and it brings up a couple of strange comments about the </body> and </html> closing tags, I presume this is why IE7 is having problems displaying the page. Firefox doesn't seem to have an issue at all. I was hoping somebody could take a look at the source with a fresh set of eyes and let me know what is wrong, I've spent hours working on this and can't see it for the life of me. I'm sure it's something simple, I know I had an issue one time where a <P> tag wasn't closed and stopped the whole site being displayed... thanks. blog.mirana[dot]co[dot]uk I'm trying to achieve the effect of flipping an element down. I can get it to flip down but I want to add perspective in order to have a 3D effect. I can get perspective to work but the second half of the transformation is what I want to happen from the start, not just half way through. A lot of things I'm trying makes it go up and then down and that's not what I'm after. Code:
.flip {
-webkit-animation: flipDown 5000ms 1 linear;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: bottom center;
}
@-webkit-keyframes flipDown {
0% {
-webkit-transform: rotateX(0deg);
}
50% {
-webkit-transform: rotateX(45deg);
}
100% {
-webkit-transform: rotateX(90deg) perspective(900);
}
}
So I know that the perspective is only being transformed in the frames between the 50% and 100% marks but if I add an initial or perspective the the other keyframes it'll either jump up and then go down or just go straight down as if I didn't have perspective in there. Any help? So I came up with this lovely design for the company I'm working for, because they're website now is just utter crap. I figured instead of coding my usual way (a mess and unvalidated) I'd start off making it as clean and css-friendly as possible. I've run into some major issues, some common and some not. If any of you could help me, I would be extremely grateful. My main problem is my issue with internet explorer. I've positioned everything to match up perfectly in Firefox, the site looks great and is aligned fairly well. However, when the site hits IE, everything shifts a couple pixels and throws everything off. Anyone know why this is happening? There is also a gap at the top of the page in IE, which isn't present in firefox. I also can't figure out how to pus the footer to the bottom. I wanted another footer that stretched the whole page at the bottom (similar to the top), with a sort of 'prefooter' on top of it. I can't figure out how to just push a regular footer to the bottom, and I've tried all the fixes I can find online. Any idea why? Here is the site: Code: http://www.chromaticstudios.net/AVT/ Hi. Ive been working on a theme I have a navbar with links on it and a background image. When you hover, you get a different background image on that section of the navbar. Im trying to style it like this: This is what it is currently like: This is my current css: Code: #nav li {
float: left;
border-right: 0px solid #d5d5d5;
text-align: center;
}
#nav li.over a, #nav a:hover, #nav a:active, #nav a:focus, #nav a.over {
color: #FFFFFF;
border-color: #2F2F2F;
background: url(../images/grad_d1.gif) repeat-x top #0088CC;
text-align: center;
}
#nav li.active a {
color: #FFFFFF;
font-style:bold;
background: url(../images/grad_d1.gif) repeat-x top #0088CC;
text-align: center;
align: center;
}
This is a link: http://toyota.identityprojects.co.uk Everything Ive tried seems to give bad results. Initally I tried putting width 75% and height 30px, centrally and vertically aligning the red gradient, but this seemed to break the whole menu and im sure its a bad way of doing it. Can anyone help me out with this, ive wasted ages on this! I have 3 div's in a container, all with the same top and left coordinates width and hieght vary according to content, z-index's 1 & 2 show and hide as designed at the proper coordinates, z-index 3 shows below and out side of the container? I have attached a doc with screen shots layer definitions: Code:
#projects{
position:absolute;
top: 400;
left: 600;
margin-left:400px;
margin-top:30px;
padding-top:30px;
padding: 10px;
height: auto;
width: 300px;
z-index: 1;
visibility: visible;
}
#DBApps{
position:absoute;
top: 400;
left: 300;
margin-left:400px;
margin-top:30px;
padding-top:30px;
padding: 10px;
height: auto;
width: 400px;
z-index: 2;
visibility: hidden;
}
#resources{
position: absolute;
top: -200;
left: 300;
margin-left:400px;
margin-top:30px;
padding-top:30px;
padding: 10px;
height: auto;
width: 300px;
z-index:3;
visibility: hidden;
}
Any and all suggestions would be greatly appreciated. Hey everyone, I'm having troubles with some DIVs. I'm trying to divide a page into 4 equal sections. If I remove the doctype declaration, it looks right in Firefox 3.5.2 In ie it is all sorts of crazy. 100% height of the inner objects seems to be referencing the window height and not the parent elements height. I'm more concerned about Firefox anyway. I expect IE to require some hacks. If I set an absolute size to the body, in px, everything works fine. But if I have the body set to %, things shrink. I tried creating a wrapper div and setting it's height/width to 50% but that didn't work either. I tried to find a solution on kravvitz and bon rouge's sites but I didn't find anything that was 100% fluid. Any ideas? HTML4Strict Code: Original - HTML4Strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> body{ width:100%; height:100%; padding:0; margin:0; color:#ffffff; background-color:#000000; } object{ float:left; clear:both; width:80%; height:100%; background-color:#cccccc; } .section{ float:left; clear:none; width:48%; height:48%; margin:1%; background-color:#333333; display:block; position:relative; } .panel{ float:left; clear:none; width: 16%; height:96%; margin:2% 2%; background-color:#cccccc; } #container{ float:left; clear:both; width:100%; height:100%; min-height:100%; background } </style> </head> <body> <div id="container"> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> </div> </body> </html>
Hi All I used Joomla to design a really simple website for someone. I currently have the problem where my text, with <h2> tag, in IE, the bottom bit of the text is cut off. For instance, a 'g' will not have its bottom 'loop'. So the text is cut off horizontally, not vertically. Works fine in Firefox. Using IE 's web development toolbar, I narrowed it down to the H2 tag, which is on a CSS file in Joomla, there are more tags nested within the <h2> tag, but they seem ok, as they are only font tags. Here is the css code of the Joomla template. Code: h2, .contentheading {
padding: 0;
font-family: Verdana, Geneva;
font-size: 1.3em;
font-weight: bold;
vertical-align: text-top;
color: #333;
text-align: left;
width: 100%; }
Any idea how to fix such a problem? Looks fine in all other browsers (of course). http://sports.theedgenews.com For some strange reason the last half of the blog blows up in IE6 and IE7. It simply does not show up. Why we don't know. When looking at the source code, it "gets" the whole page, it's just the last half is not rendered. A copy of the css is here. http://sports.theedgenews.com/css.css If anyone has any ideas at all on what to do, it would be greatly appreciated. Btw this is a design not made by me. I have become pretty familar w/ it for the blog but I have not written it. Thanks for any help. I'm having some trouble with a CSS page that works perfectly fine in IE Mac/PC, Safari, and Netscape on Mac, but goes wonky on Netscape 6 and 7.1 for PC. Basically the top navigation, consisting of three images, gets chopped in half - only the bottom half of the images is displayed. The top half is simply blank. There's enough space for the rest of the image in the navbar. If I put a background-color: definition on the DIV that handles the tab, it stops where the image stops, cut off halfway up. If I RESIZE the image, using either CSS or HTML, it displays fine (but, of course, at the wrong size!) This leads me to suspect that it's some kind of refresh bug in Netscape... but I haven't found anyone else with the same problem, so maybe it's just somethin' I did. Here's the HTML that handles this part of the page: Code:
<div id="nav2">
<div id="nav-secondary-title"><img src="images/title-subpage.gif" width="127" height="20" /></div>
<div id="nav-secondary">
<div class="tab"><a href="#"><img src="images/studentstab.gif" width="77" height="27" class="navimage" /></a></div>
<div class="tab"><a href="#"><img src="images/fullartstab.gif" width="100" height="27" class="navimage" /></a></div>
<div class="tab"><a href="#"><img src="images/studentstab.gif" class="navimage" /></a></div>
</div>
</div>
And here's the relevant CSS: Code:
#nav2 { /* nav bar for secondary pages */
border-top: 1px solid #BD7445;
border-left: 1px solid #BD7445;
border-bottom: 1px solid #2D2A28;
border-right: 1px solid #2D2A28;
height: 27px;
margin:0px; padding:0px;
z-index: 0;
background: #A73600;
}
#nav-secondary-title { /*placement of title on secondary pages */
display: inline;
float: left;
height: 20px;
margin: 0px;
z-index: 1;
padding:2px 10px 0px 10px;
}
#nav-secondary { /* placement of main nav on secondary pages */
float: right;
margin: 0px 10px 0px 10px;
height: 27px;
padding: 0px;
z-index: 1;
}
.tab {
position: relative;
top: 2px;
display: inline;
padding: 0px;
margin: 0px;
}
img.navimage {
border: 0px; margin: 0px; padding:0px 6px 0px 6px;
}
Thanks - any help would be much appreciated! I am not sure the best way to colour half a table cell? Basically we have a booking system with a table that shows booked days. On the date a booking starts I want to make the right half of the table cell (actually I would prefer to use a triangle on the top right - a diagonal half) the correct colour, and the same principle applies to a departure date. I was going to just use two 50% divs for the left/right split. But the diagonal split is a bit trickier. Should I just use 2 100% height/width divs and apply a different graphic to each? I had a problem earlier with my containing DIV pushing too wide which was resolved by adding "overflow:hidden" to my containing DIV. The problem is now that it's cutting off the sides of one of my graphics. At the bottom of my page, I have a link which you can click that will (through the magic of javascript) reveal divs on either side of my main content (the link at the bottom of the page says "reveal sea creature") When overflow:hidden was NOT on my containing DIV, I had the problem with all the extra space, but these revealing divs worked fine. Now that I add overflow:hidden, the extra space is gone, but the divs are cut off. I've tried pushing everything to the left which seems to make the DIV on the right work fine, but the left is still a problem. I realize this doesn't make sense without code, so here's the site. www . deepwaterchurch . com Thanks so much. Hi I wonder if anyone can help. I've been trying to tidy up the layout of my home page, and I'm pretty confused by the way that the header is behaving in both Firefox and Safari - the browsers I use on my Mac. I've got screen shots which show it looking good on most Windows browsers, but for some reason, all the text is bunched up at the top when I look at it on the Mac. This is a link to the page: http://www.independentliving.co.uk/index1.shtml And this is the relevant bit of the stylesheet: div#header { background-image: url("header.jpg"); background-repeat: no-repeat; color: #FFFFFF; margin-left:auto; margin-right:auto; margin-top: 0; width:780px; height: 200px; margin-bottom: 10px; font-size: 0.8em; } #header .welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } #header .slogan { text-align: left; width: 700px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.slogan { text-align: left; width: 700px padding-left: 20px; padding-right: 20px; color: #003366; } If anyone has any ideas, I'd be really grateful. I know Mac is a minority platform, but as it's the one I use, I'm pretty keen to get it working! Thanks Frances Hi there. I am looking through a style sheet from a site and was just wondering what this line would apply to: Code: submit { font-size: 10px; border: thin #A9D5F5 solid;
background-color: #395980; color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 0px; word-spacing: 1pt;
}
I guessed submit buttons but it's nothing to do with them. Thanks Colin Is there a way to use CSS to apply "no" style to something? I know it's strange... I'll explain. I have a general style for all the forms on my website but there is one form I want to appear as the standard default looking form. I don't want to assign an id or anything to the styled forms because then I would have to go back and edit every single page... I'd much rather do something to the 1 form to make it look like the browser default. Is there a way to exclude something from taking on a general style? Any help is appreciated! Thanks! Hey Guys, I'm trying to apply a style to all the TD's within a class of TR's. I am having trouble making the changes apply to the TD not the TR. How can I do it? Thanks! hi friends, i have a table with two columns.I have a designed td in stylesheet but it is not take effect.In the normal design view,style is effected but when runtime the changes will not take effect. And also if apply css "class" for td it wont accept instead it accept only property which are given in in style property i.e <td style="bgcolor:blue......"> My CSS is... Code:
.left_column
{
background-color:#d29b28;
width:2000px;
}
.content
{
background-color:#cccccc;
vertical-align:top;
padding-top:10px;
padding-left:10px;
line-height:5pt;
font-family:Tahoma;
}
.caption
{
background-color:Black;
color:White;
}
div.content
{
background-color:Lime;
float:left;
text-align:left;
font-size:20px;
line-height:3px;
font-family: Arial, Helvetica, sans-serif,Tahoma;
}
and my Source Code is...(Which is not take effect) Code:
<td class="left_column">
..............................................
</td>
<td class="content">
<div class="content"><%# Server.HtmlEncode(Eval("question").ToString())%></div>
</td>
If i give the above code <tr> is divided into two <td> with equal width. This code only take effect... Code:
<td width="200" style="background-color:#d29b28;border-style:solid; border-right-color:Black; border-width:1px; min-height:250px;">
...........................
</td>
<td class="content">
<div class="content">
<%#Server.HtmlEncode(Eval("question").ToString())%>
</div>
</td>
what can i do for that...I'm designing in Master Page.. Hi I'm building a selectbox insead of using the common select tag. I use the windows.createpopup() method to display the list of choise. Differently to the div object the popup object is like a new window so it doesn't inherit the css style sheet I've attached to the main window. I tought to attach it by using the addImport(url) method of the styleSheet object but it doesn't seem to work. Here it's my code, the show function it's called when the selectbox expands: var Select_box = window.createPopup(); Select_box.document.styleSheets[0].addImport("URL('common/css/default_style.css');") function show(element) { if (Select_box.isOpen==false) { Select_box.document.body.innerHTML = Select_box_content.innerHTML; Select_box.document.body.className='selectbox'; Select_box.show(0, 18, 150, 50, element); } else { Select_box.hide(); } } I've noticed that using the addImport method on the main window, and not on the instance of the select_box, with 0 index of the styleSheet the error doesn't occur but it doesn't also change the proprety. Tring using any other index value it gives me the usual error. So how can I attach a style sheet to a popup created with the window.createpopup()? Thank you |
|||||||