|
CSS - Differences In The Way Diff Browsers Render Radio Buttons By Default
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> </head> <body> <div style="background-color: red;"><input type="radio" id="radio"></div> </body> </html> Viewing this simple test page in a broswer shows that IE and Mozilla both vertically align the radio button differently within its "box" as well as giving it a different number of pixels of padding and/or margin on all 4 sides. Are there any tricks to getting consistency? Similar TutorialsHello, I'm working on some really simple CSS and it's giving me wildly different results in Firefox and in IE. Here is the stylesheet: PHP Code: body { background-color: #DECFEF; } .example { background-image: url("images/example.gif"); border-width: thin; border-color: white; border-style: solid; padding: 35px 35px 35px 35px; } And here is the HTML file: PHP Code: <html> <head> <title>Chatterbox</title> <link rel="stylesheet" type="text/css" href="/teststyle.css"> </head> <body> <table class='example'><tr><td> hello </td></tr></table> </body> </html> All of this works (the image in the background, the white border, etc.) except the padding! In IE there is no padding at all, but in Firefox there is 35px padding, as specified in the stylesheet. You may see this yourself if you go to this URL in the two different browsers: http://www.chatterboxletters.com/test3.html Any help is greatly appreciated ~j. Hey, In Firefox, Safari and Chrome etc, the poll in the sidebar on my website looks perfect: Lil Wayne HQ But in Internet Explorer, it displays the text underneath the radio button, instead of to the right of the button. This is what the poll currently looks like in IE: But this is what I would like it look like, and what it already looks like in other browsers: Anyone know how I can fix this with css? And I am using a IE specific style sheet. Thanks Hi all! I'm wondering for quite a while now... when you put text or a label next to a radiobutton, it never lines up nicely. The (label) text is always a bit lower then the radiobutton. A common solution to this is using tables. But I don't want to use this "hack". I've also tried CSS margins and padding, but these don't seem to help. Is there any elegant way out there to get the text nicely lined up with a radiobutton? Thanks! I am attempting to create a form to collect data from users. Basically it is just a series of yes/no/not applicable answers. I have been attempting to format the form to look like this link http://www.nateandstephie.com/php/mrrc/test.php As you can see the fieldset is nicely arranged. The problem arises when I attempt to change one of the text inputs into three seperate radio buttons. The buttons end up vertical or right on top of one another. I am guessing there has to be a way by adjusting margins or something but I cannot seem to find it. Below is the code for the link above. Any help on solving this problem or if you have a better suggestion for how to create the type of form I am looking for is greatly appreciate. Thanks!! Code: <style type="text/css">
form, label, input {
font-size : 1em;
}
fieldset {
width: 700px; margin: 0 auto; padding: 10px 20px;
}
legend
{border: 1px solid #000; padding: 5px;
}
label {
position: relative; /* makes this the 'containing block' for the Absolutely Positoned input element */
width: 330px; /* see 20px left margin on input to center with 'cellspacing' */
display: block; /* required because label is an inline element by default */
text-align: right; /* right align text in label */
margin: 20px 0;
background: #ffd;
}
label input {
position: absolute;
top: 0;
left: 100%; /* position at right side of label */
margin-left: 20px; /* adds a gap between label and input */
width: 350px;
}
br {
display : none;
}
</style>
<p>This page is based entirely on <a href="http://www.webmasterworld.com/forum83/3758.htm">Wertigons css forms thread</a></p>
<form method="post" action="">
<fieldset id="qanda">
<legend>questions & answers</legend>
<label for="a1">Please enter your name:<input type="text" name="a1" id="a1" /></label><br />
<label for"a2">Would you like to share your email?:<input type="text" name="a2" id="a2" /></label><br />
<label for="a3">What is the nature of your question:<input type="text" name="tel" id="a3" /></label><br />
</fieldset>
</form>
Other than changing the background color behind the radio button, does anyone know if it is possible to change the color inside the button to anyhing but white? More specificaly, when a button is disabled, anyway to change the grey color on the inside? Thanks guys! Hello, I have been reading through this message board for a few days now and have found great information that has helped me more than you could realize. I am here with my own problem now though and hoping somebody will be able to help me. When I took on this project I never would have imagined I would be spending this much time on trying to get radio buttons in a form to display correctly. The client wants four buttons listed horizontal, but for the life of me I can not get it to work. I have tried putting them in an unordered list, separate floating divs but nothing has worked. If anyone is able to point me in the right direction on how to get the radio buttons to list horizontal in css I would really appreciate it. The site I am working on has approximately ten different forms that all need the buttons listed this way. Thank You in advance for any help..I look forward to spending time on this site in the future. Adam Probably a simple question and I'm hoping there is a link that someone can post where I can learn about the difference of using #/. in CSS. Eg., some CSS don't use anything, some use a # and some use a full-stop before the element: Code: body {
code here;
}
#leftcolumn {
code here;
}
.someelement {
code here;
}
I am fairly new to css and am working on a login box that has a bar at the top. I'm doing one div to hold the title and another div below it which holds a table with login/password and buttons etc. I want to be able to use this in my css so that I can apply a titlebar with a simple css command. Anyway...that's getting away from the original question. Thanks for any help. Thanks for taking the time to read my question. I'm trying to center my nav bar. IE looks pretty close but FF is too far to the right. I cannot figure out why. Any ideas? Index2 Thanks for your help. oh ya, if you look at the page in IE, there is Red background behind the nav bar and in the main section, but in FF the Red is just in the main section. Not sure why. The red is there just for dev purposes, it's not staying. I know... it's ugly. Brad Thanks for taking the time to read my question. I am setting the font size for this tag in CSS and it is showing up in different sizes depending on the browser. The font is bigger in FF than it is in IE7. My text fits in the desired area in IE7, but is way to big in FF. I have to be doing something incorrect here. Does anyone notice anything? Thanks, Brad HTML: Code: <p id="FillText">Click on an item under <strong>'Latest News'</strong> to read more about it here and get links to the full story...</p> CSS: Code: #FillText {
font-size: 16px;
color: #ffffff;
height: 280px;
padding-top: 20px;
padding-left: 90px;
padding-right: 15px;
/*padding: 30px 34px 20px 96px; */
text-indent: 20px;
}
Ok so I got a big one here... At least it is to me. I know absolutely NOTHING about CSS. I use GoDaddy.com and their program WebSite Tonight to build my website. http://www.thebdsmith.com My problem is this. I build the site using a Macbook Pro 15 inch. I always felt I was rather limited with space. I was on my brother in laws computer, he has a PC with a widescreen monitor. When viewing the site on HIS computer there was so much empty space on the right hand side. So I got excited and redesigned the site (after redesigning just 2 a week earlier). The outcome was so much better than before. NOW, this is the problem. When I go back to my Macbook area is missing again and I have to scroll right to see it. I do NOT like that. I emailed GoDaddy support one guy gave me the dumbest reply I've ever heard that was the OPPOSITE of what I had stated. Another said my template design is a fixed width and I'd have to edit the CSS coding to fix it. I don't know where in the CSS code to edit. This is GoDaddy default CSS that I am just wanting to edit and reuse. I know nothing of CSS so I don't see why not. Code: /**
* @file
* @project 675
* @package sftheme
* @site app1
*/
/**
* ------------------------------------------------------------------
* @section RESETS
* ------------------------------------------------------------------
*/
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
font-family: Verdana, Geneva, Kalimati, sans-serif;
font-size: 11px;
color: #ffffff;
background-color: #051417;
background-image: url(images/675_background.jpg);
background-position: center top;
background-repeat: no-repeat;
}
a:link{color: #ffffff;}
a:visited{color: #ffffff;}
a:hover {color: #ffffff;}
.sf_navigation ul li a {color: #ffffff;}
.sf_navigation ul li a:visited {color: #ffffff;}
.sf_navigation ul li a:hover {color: #ffffff;}
.sf_navigation .subnav li a {color: #ffffff;}
.sf_navigation .subnav li a:visited {color: #ffffff;}
.sf_navigation .subnav li a:hover {color: #ffffff;}
.sf_footer {color: #ffffff;}
.sf_pagetitle {color: #ffffff;} /*(WST Only)*/
.sf_outer_wrapper {
}
.sf_main_header {
color: #ffffff;
font-size: 32px;
font-family: Verdana, Geneva, Kalimati, sans-serif;
padding-left: 29px;
}
.sf_pagetitle {
font-family: Verdana, Geneva, Kalimati, sans-serif;
font-size: 24px;
font-weight: normal;
margin: 0;
padding-top: 0px;
}
.sf_pagetitle h1{
font-family: Verdana, Geneva, Kalimati, sans-serif;
font-size: 24px;
font-weight: normal;
margin: 0;
padding-top: 0px;
}
/**
* ------------------------------------------------------------------
* @section HEADER
* ------------------------------------------------------------------
*/
.sf_outer_wrapper {
border-left:1px solid #2D4461;
border-right:1px solid #2D4461;
}
* html .sf_outer_wrapper {
width: 1200px;
}
.sf_main_wrapper{
width: 600px;
float: left;
margin-left: 67px;
}
* html .sf_main_wrapper{
margin-left: 0px;
}
.sf_wrapper {
margin:0 0;
padding:0px 10px;
width: 1000px;
}
* html .sf_wrapper {
width: 1200px;
}
.sf_wrapper:after {
clear:both;
content:".";
display:block;
font-size:1px;
height:0pt;
visibility:hidden;
}
.sf_region3 {
height: 150px;
}
.sf_main_header {
padding-top: 33px;
margin: 0px 33px;
color: #FFFFFF;
}
/**
* ------------------------------------------------------------------
* @section NAVIGATION
* ------------------------------------------------------------------
*/
.sf_region4 {
float: left;
font-size: 14px;
width: 200px;
overflow: visible;
float: left;
padding-bottom: 50px;
padding-right: 50px;
text-decoration: none;
margin-top: 53px;
margin-left: -24px;
.margin-left:-14px;
}
.sf_navigation .nav a {
width: 139px;
padding: 10px;
font-size: 18px;
}
.sf_navigation .sf_first_nav_item {
background-repeat: no-repeat;
background-position: 0px 0;
padding-top: 12px;
border: 0;
}
.sf_navigation {
float: left;
padding-bottom: 50px;
padding-right: 50px;
text-decoration: none;
margin-top: 0px;
width: 159px;
margin-left: 77px;
z-index: 1000;
position: relative;
}
* html .sf_navigation {
margin-left: 33px;
}
.sf_navigation .nav .subnav a {
background-image: none;
font-size: 12px;
padding-bottom: 12px;
padding-top: 12px;
background-color: #051417;
background-repeat: no-repeat;
background-position: top right;
border: none;
z-index: 1000;
}
.sf_navigation .nav .subnav a{
background-color: #051417;
color: #ffffff;
}
.sf_navigation .nav .subnav a:link{
background-color: #051417;
color: #ffffff;
}
.sf_navigation .nav .subnav a:visited{
background-color: #051417;
color: #ffffff;
}
.sf_navigation .nav .subnav a:hover {
background-color: #051417;
color: #ffffff;
}
.sf_navigation ul {
padding: 0 0 12px 0;
margin: 0;
list-style: none;
float: left;
background-position:0 bottom;
background-repeat:no-repeat;
}
.sf_navigation:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
font-size: 1px;
clear: both;
}
.widget {
margin-left: 24px;
}
* html .widget {
margin-left: 24px;
}
.sf_region4 .sf_navigation .nav a:hover {
text-decoration: none;
}
.sf_navigation ul li {
float: left;
}
.sf_navigation ul li a {
width: 214px;
display: block;
text-decoration: none;
padding: 0;
padding-bottom: 12px;
width: 200px
}
.sf_navigation li ul.subnav {
padding: 0;
margin: 0;
list-style: none;
float: left;
width: 160px;
position: absolute;
left: -999em;
margin-left: 158px;
margin-top: -43px;
z-index: 1000;
padding:5px 5px 0;
background-image: none !important;
background-color:#051417;
}
.sf_navigation .subnav li {
float: left;
margin-bottom: -1px;
width: 176px;
}
.sf_navigation .subnav li a {
width: 11em;
display: block;
color: #000000;
text-decoration: none;
padding: 0;
margin-bottom: 0px;
}
.sf_navigation .subnav li a:visited {
color: #000000;
}
.sf_navigation .subnav li a:hover {
color: #000000;
text-decoration: none;
}
#Nav1 li:hover,
#Nav1 li.hover {
position: relative;
}
/* lists nested under hovered list items */
#Nav1 li:hover ul,
#Nav1 li.sfhover ul {
left: auto;
}
#Nav1 iframe{
position: absolute;
left: 0;
top: 0;
z-index: 0;
display: none;
}
* html #Nav1 iframe {
display: inline;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
.sf_navigation .widget_header{
display: none;
}
.sf_navigation ul.subnav a {
color: #FFFFFF;
}
.sf_navigation ul.subnav a:hover {
color: #a4bedf;
}
.sf_navigation ul.subnav a:visited {
color: #FFFFFF;
}
/**
* ------------------------------------------------------------------
* @section MAINCONTENT
* ------------------------------------------------------------------
*/
.sf_pagetitle {
margin-left: 316px;
width: 600px;
margin-bottom: 20px;
padding-bottom: 10px;
}
* html .sf_pagetitle {
margin-left: 5px;
}
.sf_pagetitle h1 {
padding-right: 22px;
}
.sf_main_wrapper {
margin-top:-25px;
padding-bottom: 50px;
}
.sf_content {
padding-left:27px;
padding-top:21px;
float: left;
width: 600px;
}
* html .sf_content {
padding-left:0px;
width: 700px;
}
/**
* ------------------------------------------------------------------
* @section FOOTER
* ------------------------------------------------------------------
*/
.sf_footer{
width: 425px;
margin: 0px auto;
padding-top: 60px;
padding-bottom: 20px;
}
a:hover {
text-decoration: none;
}
* html a {position:realtive}
Sorry for the huge post and thanks for taking the time to read and any help you may offer! B.D.Smith Hi guys, I've been working on my CSS for a short while now. I'm attempting to get a "layout" for my site that I can work with, and I thought that a table-less layout was the way to go. I had a few problems initially with CSS and posted some code on here, and was lucky enough to get the help of an expert. He pointed out that I needed Doctypes, character sets and so on and helped me get started. I spent a "bit" of time at work doing a bit more to the page and was really pleased with the result - see attachment. I know it is currently quite crude (and the colours are appauling!) but it's practice. I then took my work home and opened it on my computer, and it has fallen apart AGAIN. I cannot believe that it can look so different in the SAME browser on different computers. At home I am using IE 6.0.2900... on WinXP SP2 At work I am using IE 5.50 on Windows 2000 SP4 I am getting so frustrated that everything in CSS seems to involve having little "extra bits" here and there to make work in each browser (or the same browser, different versions!), when the whole idea was to reduce coding and make life easier. I know that I have not posted any code, which could make helping me out difficult....but just by looking at the images below, does it look like I need a simple "hack" (whatever they are!) - ChiefWigs spoke about using an <! IF IE... comment to help out. Or should I look at just reducing everything by a pixel or two to make it fit...and just accept that gaps will be slightly larger on other browsers? It might be worth noting that I am using absolute dimensions (px) for the panels and menu holders...but relative widths (em) for things like the hyperlink boxes... I'm getting really depressed about the whole CSS thing, its already putting me off continuing to learn . If anyone could offer me help I would be very grateful. Regards, Porky What is the best practice for giving an <a> a different color than the underline? Background image? <a><span></span></a>? Something else? Is there a cleaner way to achieve what I'm doing below? I read a bit about pseudo-selectors, not sure if they can be applied to this. Code:
<style>
.class1 {float:left;width:100px;background:first_tab.jpg }
.class2 {float:left;width:100px;background:tab.jpg }
.class3 {float:left;width:100px;background:last_tab.jpg }
</style>
<div class="clearfix">
<div class="class1">
Home
</div>
<div class="class2">
About Us
</div>
<div class="class3">
Privacy
</div>
</div>
Hi, As you no doubt can tell from the title of this thread I'm a newb. I'm familiar with html but moving into learning css. Self taught, I no doubt have a lot to learn but I'm attempting to alter a template and would really appreciate some assistance. The site is www . inspirationz . info. I look at the site on my main monitor which is a large one and all looks fine. The two boxes in the main content area sit side by side, however when I look at it on my laptop or on a smaller monitor the navigation box on the right appears to sit still to the right, but beneath the box on the left. It didn't appear this way in firefox browser at first on my laptop, only Internet Explorer, but it appears that way on my other pc monitor in firefox so I assume it's likely to be a coding error. I have included some of the stylesheet coding below. Is anyone able to help me work out what's causing this? Thank you in advance. /*================================================================ Typography and links ==================================================================*/ a:link, a:visited { color: #999999; text-decoration: none; } h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, .sidebar_nav a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: bold; letter-spacing: .16em; } .featured h2 { font-size: 1.8em; font-weight: normal; text-transform: uppercase; } .post_header h2 {font-size: 1.2em; font-weight: normal; margin-top: 10px;} .post_header_page h1, .post_header_single h1 { font-size: 2em; font-weight: normal; text-transform: uppercase; } #footer h3 {margin-bottom: 25px; border-bottom: 1px dotted gray; padding: 5px;} .featured p { font-size: .8em; font-style: italic; } p { margin: 15px 0px; } .post_body_page p, .post_body_single p {margin: 0; padding: 15px 0px;} small { font-size: 0.8em; font-style: italic; } strong {font-weight: bold;} .post_body p { font-size: 1em; margin: 10px 0px; } .more { margin-top: 10px; margin-right: -10px; float: right; } .more_big { margin-top: -20px; margin-right: 20px; float: right; width: 139px; height: 73px; } .footer_comments { float: left; margin-left: 20px; margin-top: 20px; } .comment_count { font-weight: bold; font-size: 1.8em; } .featured_datetime {margin: 6px 0px} .featured_more { float: right; font-weight: bold; margin-right: 20px; text-decoration: underline; } .post_body_page ol, .post_body_single ol { list-style-type: upper-roman; margin: 30px 0px; } .post_body_page ol li, .post_body_single ol li { list-style-type: upper-roman; margin-left: 60px; } .post_body_page ul, .post_body_single ul { list-style-type: upper-roman; margin: 30px 0px; } .post_body_page ul li, .post_body_single ul li { list-style-type: disc; margin-left: 60px; } blockquote { margin: 0px 30px; padding: 20px; border: 1px dotted gray; font-style: italic; } /*================================================================ Site Structure ==================================================================*/ body { font-size:100%; line-height:1.125em; font-family: Georgia, "Times New Roman", Times, serif; background-color: #f0f0f0; background-image: url(images/index/body.jpg); background-repeat: repeat-x; color: #7C7C7C; } #page_wrapper { width: 976px; margin: 0px auto; position: relative; } #featured { height: 230px; margin-right: 3px; margin-bottom: 30px; border: 0px solid red; padding: 15px; background-image: url(images/index/featured.jpg); background-repeat: no-repeat; } #header { width: 667px; margin: auto; height: 109px; background-image: url(images/index/header.jpg); } #container { width: 990px; margin: 140px auto; font-size:0.875em; } #main_content_left_index { width: 600px; float: left; } #main_content_left { width: 600px; float: left; } #main_content_right { width: 343px; float: right; } #footer { height: 250px; padding: 130px 130px 50px 130px; margin: auto; clear: both; background-color: #eeefef; background-image: url(images/index/footer.jpg); background-repeat: repeat-x; background-position: top; } #footer_contents {width: 990px; margin: auto;} #footer_left {width: 460px; margin: auto; float: left;} #footer_right {width: 460px; margin: auto; float: right;} /*================================================================ The columns ==================================================================*/ #first_column { float: left; width: 280px; } #second_column { float: right; width: 280px; } /*================================================================ The posts ==================================================================*/ .posts { background-image: url(images/index/posts.jpg); height: 333px; width: 275px; margin-bottom: 60px; } .post_header { height: 38px; width: 255px; padding: 10px; border: 0px solid red; } .post_body { width: 255px; height: 180px; padding: 10px; overflow: hidden; font-size: .9em; } .post_footer { height: 58px; width: 275px; margin-top: 15px; } .post_header_page, .post_header_single { background-image: url(images/index/PostHeaderPage.jpg); height: 38px; width: 547px; padding: 25px; text-align: center; } .post_body_page, .post_body_single { background-image: url(images/index/PostBodyPage.jpg); background-repeat: repeat-y; width: 547px; padding: 0px 25px; } .post_footer_page, .post_footer_single{ clear: both; background-image: url(images/index/PostFooterPage.jpg); height: 90px; width: 477px; margin-bottom: 20px; padding: 0px 60px; font-style: italic; } .next_prev { border: 0px dotted gray; height: 29px; clear: both; margin-bottom: 20px; background-image: url(images/index/next_prev_posts.jpg); width: 577px; padding-top: 10px; padding-right: 10px; padding-left: 10px; } .next_prev_comments { border: 0px dotted gray; height: 29px; clear: both; margin-bottom: 20px; background-image: url(images/index/next_prev_comments.jpg); width: 535px; padding-top: 10px; padding-right: 10px; padding-left: 10px; } /*================================================================ The sidebars ==================================================================*/ .sidebar_header { background-image: url(images/index/sidebar_header.jpg); height: 91px; width: 340px; } .sidebar_body { display: block; float: left; margin:0 0 0px 0; width: 290px; padding: 25px; background: url(images/index/sidebar_body.jpg) repeat-y; } .sidebar_bottom { background-image: url(images/index/sidebar_footer.jpg); height: 56px; width: 340px; clear: both; margin-bottom: 40px; } /*================================================================ Sidebar Navigation ==================================================================*/ .sidebar_nav ul {} .sidebar_nav li {} .sidebar_nav ul li { display: block; padding: 4px; border-bottom: 1px dotted #515151; font-size: .8em; } .sidebar_nav ul ul li {margin-left: 10px; border-bottom: none; font-size: 1em;} .sidebar_nav ul ul ul li {margin-left: 10px;} .sidebar_nav { margin-bottom: 20px; } .sidebar_nav ul { } .sidebar_nav a {display: block; padding: 4px; } .sidebar_nav a:link, #navlist a:visited { color: #666666; text-decoration: none; } .sidebar_nav a:hover { background: #d8d8d8 } /*================================================================ Top navigation ==================================================================*/ #top_nav_menu { position: absolute; top: 132px; left: 0; width: 950px; } /***** drop menu *****/ #dropmenu, #dropmenu ul { list-style-positionutside; position:relative; line-height:1.5em; z-index:300; width:100%; font-weight: normal; letter-spacing: .18em; margin: 0px 0px 0px 0px; } #dropmenu a { display:block; padding: 5px 15px; text-decoration:none; color: #666666; font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; letter-spacing: .18em; } #dropmenu a:hover { color:#000; text-decoration: underline; } #dropmenu li { float:left; position:relative; } #dropmenu ul { position: absolute; display: none; width: 18em; top: 1.9em; left: 0px; } #dropmenu ul a { background: url(images/index/dropmenu_bg.png) } #dropmenu ul a:hover { } #dropmenu li ul { width:14.1em; margin-top: 4px; } #dropmenu li ul a { width: 250px; height: auto; float: left; } #dropmenu ul ul { top:auto; } #dropmenu li ul ul { left: 265px; margin:0px 0 0 10px; } #dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul { display:none; } #dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul { display:block; } /*================================================================ Categories Navigation ==================================================================*/ #main_categories { margin: auto; height: 20px; width: 976px; margin-bottom: 30px; } /* Horizontal Category List (frontpage) */ ul.horizontal_categories { clear: both; } .horizontal_categories li { display: inline; background: url(images/index/cat_bullet.png) no-repeat right center; font-size: 1.2em; font-weight: bold; letter-spacing: .08em; } .horizontal_categories a { padding: 0px 25px; } .horizontal_categories a:link, .horizontal_categories a:visited { } .horizontal_categories a:hover { } Code:
<style type="text/css">
<!--
.inside {
background-color: #CC9;
border: thin solid #000;
margin: 20px;
float: left;
clear: left;
vertical-align: middle;
text-align: left;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.tit {
background-color: #FC0;
clear: both;
float: left;
width: auto;
margin-top: -10px;
border: thin solid #000;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding-right: 2px;
padding-left: 2px;
}
.lab {
text-align: right;
}
-->
</style>
<head>
</head>
<html>
<body>
<div class="inside">
<div class="tit">
Size
</div>
<br />
<table>
<tr>
<td class="lab">Width:</td><td><input name="pxWidth" type="text" value="250" size="6" /></td>
</tr>
<tr>
<td class="lab">Height:</td><td><input name="pxHeight" type="text" value="80" size="6" /></td>
</tr>
</table>
</div>
</body>
</html>
Could someone tell me why does this piece of code doesn't render the same way in IE as it does in Firefox. In Firefox everything is fine... I think it has something to do with the margin property of the .inside class [Edit] Sorry about the sloppy post. I actually resolved the issue. It had to do with the way IE understands divs. Thanks you for your reply i was able to have the image button links hover and change colors using 2 different image buttons, however i came to realize that i want to have the hovered image stay active once the button is clicked. can someone assist me with this? this is what my code looks like: Code:
a:hover#index {
background: url("./images/home-red.png") 0 0 no-repeat;
}
a:hover#howto {
background: url("./images/howtobuild-red.png") 0 0 no-repeat;
}
a:hover#installation {
background: url("./images/installation-red.png") 0 0 no-repeat;
}
a:hover#design {
background: url("./images/dande-red.png") 0 0 no-repeat;
}
a:hover#dean {
background: url("./images/deansblog-red.png") 0 0 no-repeat;
}
a:hover#forum {
background: url("./images/userforum-red.png") 0 0 no-repeat;
}
a:hover#plan {
background: url("./images/planbike-red.png") 0 0 no-repeat;
}
a:hover#search {
background: url("./images/search-red.png") 0 0 no-repeat;
}
a#index, a#design, a#howto, a#installation, a#dean, a#forum, a#plan, a#search {
width: 86px;
height: 27px;
float: left;
margin-top:6px;
position:relative;
left: 115px;
}
a#index {
background: url("./images/home-grey.png");
}
a#design {
background: url("./images/dande-grey.png");
}
a#howto {
background: url("./images/howtobuild-grey.png");
}
a#installation {
background: url("./images/installation-grey.png");
}
a#dean {
background: url("./images/deansblog-grey.png");
}
a#forum {
background: url("./images/userforum-grey.png");
}
a#plan {
background: url("./images/planbike-grey.png");
}
a#search {
background: url("./images/search-grey.png");
}
My vertical CSS navigation menu buttons overflow when adding 10 or more buttons. The new buttons end up to the right side of the top buttons. If I change the html format for paragraph format it stops this, but in IE there becomes big space between the buttons. Here is the site: http:// bradleyrose . net / WaterStreetRestaurant http://www.santeecooperobgyn.com/obgyn I have just begun to design a website and already I have run into bizarre (to me) behavior. In the horizontal navigation bar, when you run your mouse over it, you can see that the inline element is bigger than the block element container because the background color changes, revealing a small 2px or so size difference. Here is the relevant CSS. Code:
* { padding: 0px; margin: 0px; }
#navbar {
list-style-type: none;
margin-left: 0px;
background-color: #336633;
padding: 0em;
height: 2em;
margin: 0px;
font-size: 10pt;
}
#navbar li {
display: inline;
float: left;
padding: 0.5em;
}
#navbar li a {
color: white;
text-decoration: none;
text-transform: uppercase;
padding-left: 10px;
padding-right: 10px;
padding-top: 0.5em;
padding-bottom: 0.5em;
vertical-align: baseline;
line-height: 100%;
}
#navbar li a:hover {
background-color: #669966;
I have no idea why this happens, unless the inline element content height is actually determined by factors other than the line-height. It seems like the total height should sum to 2em in both cases. Hi all, Wanted to put this to some experienced devs and just ask, why is IE8 screwing my floats!? :'( So sad.. Here's my file: Code: <html><head> <style media="screen" type="text/css"> body { margin:0; padding:0; border:0; background:#535353; font-family:"Cambria"; text-shadow: 0px 2px 1px #3b3b3b; } #masterwrap { width:100%; } #wrap { margin:2%; border:2px solid #3b3b3b; } h1 { color:#8c8c8c; font-size:2.3em; text-decoration: underline; } h2 { color:#8c8c8c; padding:0; margin:6; } h5 { margin:80; font-size:8em; color:#ffb142; text-shadow: 0px 2px 1px #3b3b3b; } #header { text-align:center; border-bottom:2px solid #3b3b3b; width:100%; height:80px; } #nav{ clear:both; text-align:center; width:100%; height:50px; border-bottom:2px solid #3b3b3b; } #left { float:left; width:50%; border-bottom:2px solid #3b3b3b; } #right { float:left; width:50%; border-bottom:2px solid #3b3b3b; } #fat { clear:both; width:100%; text-align:center; border-bottom:2px solid #3b3b3b; } #bottom { clear:both; text-align:center; width:100%; height:150px; border-bottom:2px solid #3b3b3b; } #footer { clear:both; text-align:center; width:100%; height:50px; } </style> </head> <body> <div id="masterwrap"> <div id="wrap"> <div id="header"><h1>header</h1></div> <div id="nav"><h2>nav</h2></div> <div id="left"><h2>left</h2></div> <div id="right"><h2>right</h2></div> <div id="fat"><h5>fat</h5></div> <div id="bottom"><h2>bottom</h2></div> <div id="footer"><h2>footer</h2></div> </div> </div> </body> </html>
just copy paste into a html to view. |
|||||||