|
CSS - Does Ie/opera Have Anything Like "-moz-border-radius" ?
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? Similar Tutorialswhat 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. I'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 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... 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 */
Hi guys, For a pure CSS site, is it depreciated to have a border="0" tag in <img elements? (My reasoning is that if one browser doesn't support CSS, it will show the user images with ugly borders... that's anyway the default behavior in IE and FF). Thank you I have an image I am using for my submit button, it has this "Link Box" around it that I want to go away. I just want the image shown and not the border or whatever is happening here. I assume it is because it is a link. I use an external style sheet for the rest of the page, so if there is a suggestion for me to reference a style from the style sheet, this would be a huge help. I have read about everything I could and still cannot find my answer. Is there a way to get rid of the box around my image using CSS? Here is what I have: <input name="imageField" type="image" onClick="return valLoginForm(frmLogin)" src="images/b_login.gif" width="60" height="18" > Thank you for your help. 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? I have a single table cell that will not display its border-bottom attribute in IE. I've searched the forums and the Web for a reason, but Googling for "css", "border" and "ie" brings up a minefield! The table cell CSS looks like this: Code: td.cell_myCell {
height: 10px;
width: 490px;
border-bottom: 1px solid #999999;
}
I'm using a Transitional DOCTYPE, mainly because it's default in Dreamweaver, and as far as I'm aware "border-bottom" is CSS2 valid. The attributes always works in Firefox, but for some reason IE won't display it at all. It won't even display "border: 1px". Help! 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 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 basically if i add a border around a button in FF i can click the button however the effect of "pressing" a button is lost.. IE mainatain this! is there a solution or will i have to live with it? 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? Hi, ive been using border-radius to add some corners to things. Ive applied the border-radius.htc patch that is around to get it work in IE. Our site is built using a software package called actinic. In the software preview, and by previewing the page everything works fine. ive now uploaded the website to a test server to check on everything and it no longer works. how ever it does work to some degree in compatability mode. as a tempory measure I have added <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> to the page. which seems to work, but for some reason, on the last few items on the page it doesnt work. Please see link to see what im on about. any ideas? surftest.glowormdigital.com/acatalog/Mens_Billabong_Tee_Shirts.html Thanks. I just ran my page through the CSS validator, validating as CSS3, but keep getting an error, Parse Error [empty string] because of the border-radius attribute I have in my stylesheet. If I remove that line, the stylesheet validates. Why does border-radius fail? It is a CSS3 property. Here is what that line looks like in my file - Code: border-radius: 10px 10px 10px 10px; Hi, I'm trying to get top both corners of my table header row to have a rounded corner each, but only one is appearing. The HTML is: Code: <tr> <td width="12%" class="tbl-col cnr-tl">Col 1</td> <td width="20%" class="tbl-col">Col 2</td> <td width="20%" class="tbl-col">Col 3</td> <td width="30%" class="tbl-col">Col 4</td> <td width="12%" class="tbl-col cnr-tr">Col 5</td> </tr> and the css is: Code:
.tbl-col {
background-color : #FFDA99;
color : #C00000;
font-size : 15px;
font-style : italic;
font-weight : bold;
height : 25px;
text-align : center;
}
.cnr-tl {
border-top-left-radius : 10px;
-moz-border-radius-topleft : 10px;
-webkit-border-top-left-radius : 10px;
}
.cnr-tr {
border-top-right-radius : 10px;
-moz-border-radius-topright : 10px;
-webkit-border-top-right-radius : 10px;
}
When the styles are in this order, the right hand column has a rounded corner, but if you swap the order of .cnr-tl and .cnr-tr, the left hand column has a rounded corner, but I can't get both end columns to have rounded corners at the same time. Putting both corner styles on one column does work, though, but I'd like to have both end columns to have rounded corners and the middle columns to have straight corners. Does anyone know how to do this? Debbie Is there by chance a feature of MS Front Page that helps us out by changing height and width attributes to upper case, which CSS does not recognize? If so, is there a way to disable this feature? What is the popular alternative (among those in the know) to MS FP? The "normal-html-preview" screen format in FP is great. Or, can we simply get rid of the height and width calls in "img src=" links? Thank you for any attention to this. Ed I have a very simple question: I have this html code: Code: <div id="text"> <p><a>text</a></p> <p><a class="red">text</a></p> <p><a>text</a></p> </div> And this CSS style: Code: .red { color: red; }
#text a{ color: blue; }
I would like to apply the .red class, but it does not work, because the #text a overrides it. How can I solve that? It is just an example because it is a cause of a problem generated by a CMS, and I can only play with the CSS, not with the HTML side. |
|||||||