|
CSS - Applying Styles To "<label" Doesn't Work In Ie, Ff And Opera??
Hi!
Let's say I have this Code: <form id="some_form" ...> <div> <label> Some text <input .... /> </label> <label> Some text 2 <input .... /> </label> <input type="submit ... /> </div> </form> In CSS I have this: Code: #some_form label {margin-button:10px}
This does work in NO browsers! Very strange... If one replaces the label with a div, everything works fine again. I really want to use the labels... Similar TutorialsI'm taking over a departmental web page that has a whole bunch of Code: <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> in the web pages. Does anyone know how to put this in a stylesheet so that I don't have to put this code in every <body> tag when I create a new page? I've searched all over and can't find a reasonable resolution. Thanks is there any way to change the style of the "Browse..." button on the <input type="file"/> tag? for instance, setting background-color will only change the text box of the tag and not the button. While previewing my project I'm working on in Opera, I can't see the ' Background Color ' . I can see it fine in IE and Firefox, but darn if that Opera isn't giving me a hard time. I had checked my code twice to see if it's correct, it's seems fine. by the way, I am using Dreamweaver as my editor. Can anyone help me out on this issue? Thank you I am using XAMPP, my project is not online. Here is the following code >>>>> Code: <body>
<div id="mainBody-wrap" class="clearfix" >
<div id="social-container">
<div id="social">
<div id="socialNav">
<ul id="socialList">
<li class="rss" title="Subscribe by RSS"><a href="#" target="_self"></a></li>
<li class="delicious" title="Bookmark us using Delicious"><a href="#" target="_blank"></a></li>
<li class="facebook" title="Join us on Facebook"><a href="#" target="_blank"></a></li>
<li class="twitter" title="Follow us on Twitter"><a href="#" target="_blank"></a></li>
</ul>
</div>
<div id="googlePlus">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="small" annotation="none"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div id="infoNav">
<ul id="infoList">
<li><a href="#" target="_self">Message Board</a></li>
<li><a href="#" target="_self">Help FAQ</a></li>
<li><span>[ </span><a href="#" target="_self">Rules</a><span> ]</span></li>
<li><a href="#" target="_self">Contact Us</a></li>
</ul>
</div>
</div>
</div><br style="clear:both" />
<div id="hdr-container">
<div id="hdr">
<div id="searchBox">
</div>
</div>
</div>
</div>
</body>
Code: html, body {
height: auto;
width: 100%;
}
body {
background-color: #161616;
font-family: " Lucida Grande ", " Verdana ", sans-serif;
font-size: 12px;
color: #FFFFFF;
text-align: center;
}
/* Begin #mainBody-Wrap */
#mainBody-wrap {
width: 100%;
}
/* begin #social-container */
#social-container {
width: 100%;
background-color: #0F0F0F;
border-bottom: 1px solid #000000;
}
/* end #social-container */
/* begin #social */
#social {
width: 810px;
height: 27px;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
/* end #social */
/* begin #socialNav */
#socialNav {
width: 95px;
height: 27px;
float: left;
}
/* end #socialNav */
/* begin #socialList */
#socialList {
width: 95px;
height: 16px;
position: relative;
top: 5px;
}
#socialList li {
position: absolute;
top: 0;
}
#socialList li, #socialList a {
height: 16px;
display: block;
}
.rss {
background: url(../images/sprite-ln1.png) no-repeat scroll 0 0 transparent;
width: 16px;
left: 0;
}
.delicious {
background: url(../images/sprite-ln1.png) no-repeat scroll -16px 0 transparent;
width: 16px;
left: 27px;
}
.facebook {
background: url(../images/sprite-ln1.png) no-repeat scroll -32px 0 transparent;
width: 16px;
left: 52px;
}
.twitter {
background: url(../images/sprite-ln1.png) no-repeat scroll -48px 0 transparent;
width: 16px;
left: 78px;
}
#googlePlus {
float:left;
margin: 6px 0 0 8px;
}
/* end #socialList */
/* begin #infoNav */
#infoNav {
width: 370px;
height: 27px;
float: right;
}
/* end #infoNav */
/* begin #infoList */
#infoList {
margin: 5px 0 0 0;
text-align: right;
}
#infoList li {
display: inline;
margin: 0 0 0 18px;
}
#infoList li a {
color: #FFFFFF;
}
#infoList li a:hover {
color: #DDDDDD;
}
#infoList li span {
font-weight: bold;
color: #990000;
}
/* end infoList */
/* begin #hdr-container */
#hdr-container {
width: 810px;
margin: 0 auto;
}
/* end #hdr-container */
/* begin #hdr */
#hdr {
width: 100%;
height: 155px;
}
/* end #hdr */
/* begin #searchBox */
#searchBox {
width: 421px;
height: 37px;
margin: 5px 0 0 0;
display: block;
float: right;
}
/* end #searchBox */
/* End #MainBody-Wrap */
/* Begin ClearFix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
Hey everyone, Just curious here, does IE and Opera have something that rounds corners like Firefox using CSS only? I figure IE would because it has some other stuff, but I am not sure sure about Opera. Any thoughts/links on this? Or will I have to fall back to Javascript? what is the equivilant to <table border="1" cellpadding="2" cellspacing="0"> in css? i've tried PHP Code: table { border-spacing: 0px; padding: 0px; border-colapse: colapse; border-style: solid; border-width: 1px; } td { border-style: solid; border-width: 1px; padding: 2px; } That makes the width 2px wide though. I want it to only be one. And the padding seems to be messed up as well. Hello, I would like both the front-end and the back-end of a site to share the same style sheet because both are very similar and if I change a style in one, I would most likely do the same for the other. The only thing I really want to change between the front-end and the back-end in the stylesheet is the page's background image. Is there some way to have two "body" background images in one stylesheet, and control which pages get which background image? Thank you!! I have a "nav" div defined in a .css file. This div has text links and picture links. The special effects that are applied to the txt are showing up on the pictures. I tried to make "a.plain" p style to make these effects go away, but it's ignoring it. How can I get rid of those txt effects on the pictures? #navlinks a { display: block; font-weight: bold; color: #fff; border-bottom: 1px solid #E5D9C3; padding: 1px; margin-bottom: 2px; } #navlinks a:hover { color: #fff; background-color: #B56880; } a { color: #B04C6B; text-decoration: none; } this is me trying to add a p style to take off the effects... a.plain { font-weight: bold; color: #B04C6B; padding: 1px; margin-bottom: 2px; } I'm sorry to sound like a noob here but I've looked all over and I can't seem to figure it out. Thanks so much, yaki If you go here company.com layout It looks correct in IE or Firefox But in Chrome/Opera the text is a different Font and is bigger and it messes stuff up. Here is the CSS where font is defined for body. All other elements are defined with the same Font declaration. body { background: #e3edc2; color: #333; font: .8em, arial, helvetica, sans-serif; margin: auto; padding:0px; } I'm using the CakePHP framework to build my site. I hope I'm not asking an impossible question and being since I'm new an all.. Anyways I finished a simple design well I thought it was simple anyway until I tried to make the content box to be a fluid width. Here's what it's supposed to look like. http://planet-rpg(dot)com/PR_style.png // yes I know I'm a new user.. Here's what I currently have. http://planet-rpg(dot)com Here's my coding. html Code:
<?php echo $html->docType('xhtml-trans'); ?>
<html>
<head>
<title>Planet RPG::. Imagine a creative universe : <?php echo $title_for_layout; ?></title>
<?php echo $html->css('styles'); ?>
</head>
<body>
<div id="top_bar">
<p>top bar</p>
</div>
<div id="body">
<div id="header">
<p>Header</p>
</div>
<div id="page-wrap">
<ul id="navigation">
<li class="first"><a href="/games/">Games</a></li>
</ul>
<div id="frame">
<div id="container">
<div id="main_content">
<p>Content area</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>footer coding</p>
</div>
</body>
</html>
css Code:
html {
background: #2b435d;
}
html, body {
margin: 0;
}
body, table {
color: #303030;
}
img { border: 0; }
#body {
background: #d8dde8;
padding: 0 0 16px;
}
#page-wrap {
min-width: auto;
margin: 10px auto;
}
#frame {
margin: 0 auto;
padding: 0px 1170px 0px 220px;
margin-top: -17px;
}
#main_content {
background-color: #fff;
}
#header {
background: url("../img/header.png") repeat-x bottom left;
height: 64px;
margin-top: 36px;
}
#navigation {
background: url("../img/navigation.png") repeat-x bottom left;
height: 31px;
margin-top: -20px;
font-family: "Arial", sans-serif !important;
font-size: 14px;
color: #fff;
text-shadow:-1px -1px 0 black;
list-style-type: none;
padding:1px 5px 1px 220px;
}
#navigation li {
float: left;
}
#navigation li a {
border-left: 2px solid #303030;
text-shadow:-1px -1px 0 black;
color: #D0D0D0;
font-size: 14px;
font-weight: bold;
text-decoration: none;
display: block;
height: 21px;
padding: 6px 12px 1px;
}
#navigation li a:hover {
color: white;
text-shadow:-1px -1px 0 black;
}
#navigation li.first {
padding-left: 236px;
margin-left: -236px;
text-shadow:-1px -1px 0 black;
}
#navigation li.first a {
background: url("../img/cursor.png")bottom center no-repeat; height:24px;
color: #6193c7;
border: 0;
text-shadow:-1px -1px 0 black;
}
#logo {
width: 166px;
height: 50px;
margin-top: -32px;
margin-left: 20px;
position: absolute;
z-index: 2;
}
#footer {
background: #607080 url("../img/footer.png") repeat-x;
height: 60px;
padding: 30px 0;
clear: both;
}
#top_bar {
background: url("../img/top_bar.png") repeat-x bottom left;
height: 36px;
font-family: "Arial", sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
height: 36px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
}
I haven't used CSS/html in awhile but if anyone can help me either "fix" the content box so it appears like mockup which would be centered on my screen as my resolution is 2560X1600(30") and just repeat the <div's> when needed. Hope someone can help me with my question. http://stuweb.cms.gre.ac.uk/~as234/full/full.htm some problems: in IE the menu at the top is "block" level but i want it to be in a line? whereas in ff its ok! in ff, one of the menu image (called "main" on the left of review) doesnt appear but if u hover over it, u will see the rollover image! the background colour should be grayish however that DOESNT happen! (I originally posted this at the end of another of my topics but I don't think it was seen). I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen. Example Picture The site itself. Any ideas? Hi! What do you think of this Javascript "make IE 6 work exactly like IE7"? http://dean.edwards.name/IE7/ Thank you Hello, Here's my Page: www.imagesandwords.org.uk/andrewjamesrp/ Inside the < div> #main is a line of text styled like this: Code: #opener
{
clear: both;
position: relative;
bottom: 1em;
width: 718px;
height: 25px;
text-align: center;
color: #484848;
}
Without position: relative the layout breaks down and I am not sure why. Surely a child/descendent element is relative to it's parent anyway? Also, can anyone tell me what the clear:both does in this context? I have an idea that you use it after a float and in my mind I understand it as a chance to clear the slate of any float inlfluence on future elements? Many thanks Martin First post here by the way, so go easy on me! Is posting a link forbidden? Hi guys, For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ? Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html). Thank you Hi, I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser. Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important. I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML Here is my Html PHP Code: <DIV id="nav"> <ul> <li id="1"><a href="Home">Home</a></li> <li id="2"><a href="About-us">About us</a></li> <li id="3"><a href="FlexNews">FlexNews</A></li> <li id="4"><a href="Careers">Careers</A></li> <li id="5"><a href="Contact">Contact</A></li> </ul> </div> Pretty straight forward, now my css PHP Code: #nav { width:1005px; vertical-align: middle; text-align: left; } #nav ul { list-style: none; padding: 0; margin: 0; } #nav li { float: left; text-align: left; } #1 a{ line-height: 20px; float: left; width: 215px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #1 a:hover { line-height: 20px; float: left; width: 215px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a{ line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a { line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a { line-height: 20px; float: left; width: 184px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a:hover { line-height: 20px; float: left; width: 184px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #5 a { line-height: 20px; float: left; width: 183px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; } #5 a:hover { line-height: 20px; float: left; width: 183px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; } Here is an exmple link http://dev.121design.co.uk/flextrade2/ Works fine in IE but not in Firefox, heres hopling someone can help. Thanks in Advance, tried so many different methods and none seem to work. Cheers, Stuart This should be easy but I can't get it. I have this in my CSS: a:link { color: #000000; font-weight: 400; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: underline; } a:visited { color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 200; text-decoration: underline; } a:hover { color: #333333; font-weight: 400; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; } a:active { color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 400; text-decoration: underline; } .pageTitle { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFF24; font-weight: bold; display: table-cell; padding: 5px 10px; } td.pageTitle a.pageTitleRef, td.pageTitle a.pageTitleRef:link, td.pageTitle a.pageTitleRef:visited, { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFF24; font-weight: bold; } td.pageTitle a.pageTitleRef:hover, td.pageTitle a.pageTitleRef:active, { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFF24; font-weight: bold; } and this in the HTML: <tr><td class="pageTitle"><a href="about.html" class="pageTitleRef">About Us</a> :: Experience & Past Projects</td></tr> It looks fine in IE, but in Firefox it looks like the "a" declaration is over-riding the "a.pageTitleRef" declaration. So the "About Us" looks like an "a" tag while the "Experience & Past Projects" looks as it should (like a page title in yellow). Any help would be greatly appreciated! Laura S. that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently. However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image. If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall. (URL address blocked: See forum rules)/cv/cv.html This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work? i have a table that i'm using within a div. here is the style #content { float: left; padding: 0 20em 4em 3em; } #content table .content { border: 1; bordercolor: #fff; width: 100%; cellspacing: 0; cellpadding: 0; } when i reference the style for the table within the div, nothing is applying. not sure what im doing wrong here. <div id="content"> <table class="content"> please advise.. i'm guessing its syntax I have a few styles that I was to apply to anything that has a class="title". These work fine when I say, for example: Code: <div class="title">This is my title</div> but, for some reason, they don't work when I use them like so: Code: <table border="0" cellspacing="0" cellpadding="5" class="maintable">
<tr>
<td>
<div class="title">News Updates:</div>
</td>
</tr>
</table>
Can anyone explain to me why this is? If so, how should I go about getting around it? I have a div with a set id and style matching the id. It's very simple, straight forward, but the style is not being applied. When I inspect the element using FireBug it also does not see the style...however when I view the stylesheet in the browser I can see that the style exists within the stylesheet. I'm perplexed...my guess is I'm tired and missing something HTML Code: <div id="event_photos"> <a href="images/events/cce/cce_lowenthal.jpg" rel="lightbox[CCE]" title="People"> <img src="images/events/cce/thumbs/cce_lowenthal.jpg" alt='CCE Lowenthal' width="100" height="67"/></a> </div> CSS Code:
#event_photos {
width: 100%;
text-align: center;
margin: 0 auto;
background-color: red;
}
#event_photos a:link, #event_photos a:visited {
color: #f7f7f7;
}
#event_photos a:hover {
color: #0CB2E8;
}
|
|||||||