|
CSS - Can't Seem To Fix Difference Between Ie/ff With Css Buttons
Okay so I have a basic CSS navigation panel on the left-hand side of my webpage. Basically I surrounded an <li> tag with a solid border so it's a rectangle with some text in the middle (ie. about, home, contact us, articles, etc) and I linked it using an <a> tag:
Example: Code: <ul> <a href="home.html" class="button"><li>HOME</li></a> <a href="about.html" class="button"><li>ABOUT</li></a> ... </ul> Then for CSS: Code: #navigation ul {
width: 128px;
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
background: #CCC;
padding-left: 5px;
margin-top: 5px;
border: 1px solid #000;
border-left: 10px solid #336699;
}
#navigation a.button {
color: #333;
text-decoration: none;
}
#navigation a.button:hover {
color: #FFF;
}
The url is: Wolfenzon Schulman It's a website for a firm I work for. So basically, on the FF edition, the buttons work as intended, the entire <li> tag is linked (<a>'ed) and you can click on any part of it to activate the :hover and follow the link. The IE version, you can only hover over the text and anywhere before that (probably because of the padding-left: 5px associated with it). No matter what I've seemed to come up with, the IE version will just not cooperate. Similar TutorialsMy 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 Hi! What is the difference between these two snippets of code? <ul> <li>...</li> <li>...</li> <li>...</li> </ul> and <ol> <li>...</li> <li>...</li> <li>...</li> </ol> I know ul stands for unordered list and ol for ordered list but the two examples above are the same, right? What is the difference between these two: .itemBox #itemBox I'm trying to figure out what the difference is between these variables. I'm kind of clueless right now because for my CSS code, the gap between the header and the navigation bar is completely different for Firefox than IE. I designed it in IE (which was probably a mistake in hindsight) so that's the browser it appears fine in, but in Firefox the gap is about 2-5 pixels. I've looked at all the resources online, but still can't figure out how to fix the code, so if someone could edit the code below so it works I'd be greatly thankful. Cheers. CSS Extract: Code:
#wrapper, #content-wrapper {
float: left;
width: 100%;
}
#header {
height: 100px;
padding: 15px 0 5px 0;
background: url("http://talkpw.com/images/index_02.gif");
vertical-align: middle;
}
#navbar {
height: 28px;
border-bottom: 1px solid #ccc;
background: url("http://talkpw.com/images/index_08.gif");
}
.in {
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
vertical-align: middle;
}
.ina {
margin: 5px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 1;
vertical-align: bottom;
}
.navtext a:link,
.navtext a:visited,
.navtext a:active{
color: #FFFFFF;
text-decoration: none;
vertical-align: bottom;
}
.navtext a:hover{
color: #FF0000;
}
HTML: Code:
<div id="wrapper">
<div id="header">
<div valign="top" class="in">
<img src="http://www.talkpw.com/images/logonew.gif">
</div>
</div>
<div id="navbar">
<div class="ina"><span class="navtext"><font face="Tahoma" size="2" color="#FFFFFF"><a href="http://www.talkpw.com/index.php" style='text-decoration: none;'>Home</a> | <a href="http://www.talkpw.com/forums">Forums</a> | <a href="http://www.talkpw.com/videos.php">Videos</a> | <a href="http://www.talkpw.com/forums/index.php?autocom=arcade">Arcade</a> | <a href="http://www.talkpw.com/links.php">Links</a> | <a href="http://talkpw.com/forums/index.php?act=Reg&CODE=00">Register</a></font></span>
</div>
http://www.justusvizslas.com/CrossTies/cttemplate.php I'm working on a new site and am trying to get a basic template set up. In my navigation menu I notice a height difference where the tabs are located. In FF it appears that the #navigation or .menu div has a slightly larger height than in IE, which just closes the height snug with the height of the tabs themselves. Can someone explain why this is the case and how/if I can correct it so that it shows up the same in both browsers? Can anyone help explain why my menu is displaying differently in FF and IE? I've done some research and tried a few hacks, I cannot figure this one out. http://www.departurestudios.com/playground/ Firefox Screenshot - http://www.departurestudios.com/playground/ff_screen.jpg IE Screenshot - http://www.departurestudios.com/playground/ie_screen.jpg My goal is to get it to look like it does in FF. Thanks. I have created a menu using css... but when i view it in ie it looks just about right.. but on firefox.. the width is just off... example IE: width is fine ------------------ --------- | | | | | | |______| but in firefox it just go all the way across the screen.. arg Code:
.navcontainer ul
{
margin-top: 0;
margin-left: 2;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px
}
.navcontainer {
margin: auto;
}
.navlist a {
width: 100%;
}
.navcontainer>.navlist a {
width: auto;
}
.navcontainer a
{
display: block;
padding: 1;
width: 165;
background-color: #003366;
border-bottom: 1px solid #eee;
}
.navcontainer a:link, .navlist a:visited
{
color: #EEE;
text-decoration: none;
}
.navcontainer a:hover
{
background-color: #369;
color: #fff;
}
i have attached the html file here.. cause i cant upload it. Hello, I am trying to get my drop down boxes to line up properly and it is not working out for me in IE. Firefox looks alright, but I am having trouble getting it to line up in IE. Can someone please take a look at This Example and advise me on anything you see that is out of place. Thanks for the insight. webg Thanks for taking the time to read my question. My page has a container with only the left and right borders showing. I want to center it. If I put in margin values that look right in FF, they are way off in IE. I suspect that there is a difference in where IE starts counting from and where FF starts counting from. FF seems to be counting from the parent container, where as I am not sure where IE is counting from. How can I fix this? Thanks, Brad HTML: Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="piercedjunkmail@hotmail.com"> <meta name="generator" content="AceHTML 5 Freeware"> <link href="TestLayoutCSS.css" rel="stylesheet" type="text/css" /> <title>Test Layout 1</title> </head> <body> <div id="HeaderContainer"></div> <div id="PageTitle">This is the title of the page</div> <div id="MajorLeftMainContainer"> <div id="LeftMainContainer"></div> <br /> <br /> <br /> <br /> <br /> <br /> <hr class="CenterVert" /><br /> <hr class="CenterVert" /> </div> <div id="MajorRightTopContainer"> <div id="RightTopContainer"></div> <div id="VertLines"></div> <div id="RightCenterContainer"></div> <div id="VertLines"></div> <div id="RightBottomContainer"></div> </div> </body> </html> CSS: Code: @charset "iso-8859-1";
body {
font-family: Foo, times, serif;
margin: 0px;
background-color: #4F9FC5;
}
#HeaderContainer {
height: 50px;
width: 100%;
/*border-color: green;
border-style: solid;
border-width: 2px;*/
}
#MajorLeftMainContainer {
float: left;
margin-top: 90px;
margin-left: 10px;
/*width: 68%;*/
width: 670px;
height: 310px;
/*background-color: #4F9FC5;*/
background-color: yellow;
}
#LeftMainContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: left;
width: 80%;
height: 300px;
background-color: #EAEAEA;
}
#MajorRightTopContainer {
float: left;
margin-top: -50px;
margin-right: 10px;
width: 30%;
height: 580px;
/*background-color: #4F9FC5;*/
background-color: green;
}
#RightTopContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: left;
width: 97%;
height: 150px;
background-color: #EAEAEA;
}
#RightCenterContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: left;
width: 97%;
height: 150px;
background-color: #EAEAEA;
}
#RightBottomContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: left;
width: 97%;
height: 150px;
background-color: #EAEAEA;
}
#PageTitle {
font-size: 25px;
font-family: arial, times, serif;
/*border-color: green;
border-style: solid;
border-width: 2px;*/
width: 340px;
height: 35px;
margin-top: 40px;
margin-left: 25px;
color: black;
font-variant: small-caps;
}
#VertLines {
border-left-width: 4px;
border-left-color: #66CDFF;
border-left-style: solid;
border-right-width: 4px;
border-right-color: #66CDFF;
border-right-style: solid;
float: right;
width: 35px;
height: 50px;
margin-right: 100px;
}
hr.CenterVert {
vertical-align: middle;
border-width: 2px;
border-style: solid;
border-color: #4F9FC5;
}
hi, i was studying how to make layouts in css and was recommended to read this website http://www.thenoodleincident.com/tutorials/box_lesson/basic4.html I learned a new thing from this, to use TOP, LEFT and RIGHT, for side bars. I used to use clear:both and float:left to make similar layout before. anyway, i was facing a problem with one of my recent practice work where the same padding, height, margin shows different height of the div. Even this website has this problem. If you open the same in FF and IE together and see both closely you will see the difference height and width of divs, especially left. In FF it is more than IE. how can we overcome this problem? because I checked skype.com in FF and IE at the same time and had a close look, but there is NO difference between div height or width, it means it is doable. Any wise words are much appreciated. Hi. I like to know what're the differences. I know that css3 has more properties. It can do rounded corner border easily and also some new ways to write css. Is this css3? input[type="submit"] Also I remember seeing websites mentioned css3 can be written in module or something like that? What other differences? Thanks. What is the Difference between CSS2 and CSS3 ??? so what do each one do? I am busy building a site with XHTML & CSS, which is nearly finished. I build my sites by hand and check while building in FF and IE7. When I thought I was finished I checked the site in IE6 and saw ONE of the divs was slightly shifted to the right. I was amazed, since only one of them was shifted, and nearly all are positioned in a similar matter. I have tried to remove all parts of the CSS, edited the containing layer, the layer before, and after, nothing worked. I now haven't got a clue on what to do next or what could cause this difference in rendering. Can you help me? You can find the site here. The CSS is external, you can find it here. [edit: links are outdated, sorry /] If have made the background of the whole site white and of the containing div (with id "main") black. The layer that is shifted now has the color red and has the CSS id "boven_rechts_top". By the way, the XHTML is validated as: Valid XHTML 1.0 Transitional and the CSS is validated as well. I'm a bit confused about the class and id selector. It seems they both produce the same result. I've a book and it said that the id selector can be used once. Is that mean used once on the web page or on the css? <div class="content"></div> <div id="content"></div> Thanks. Here's my page http://www.martcol.co.uk/Andy/ I can't get the image caption to line up in FF and IE6. I know it's something to do with the Box Model but if I get it in one, it goes out in the other.... Here's my CSS http://www.martcol.co.uk/Andy/main.css I imagine it's only a little tweak on this but I can't seem to get it. Thank Martin Hey, I'm designing using an XHTML/CSS based layout and I've noticed that the following CSS shows slightly different results on Mozilla and IE: Code: .box {
position:relative;
width:600px;
padding:5px;
border:1px solid black;
}
Applying this to a DIV will display a 600 pixel wide box on IE. On Mozilla (Firefox, etc) though, it'll be 612 pixels wide. This is because Mozilla is adding the padding and borders to the initial width. I would like Mozilla to display the same as on IE, so I recoded: Code: .box {
position:relative;
width:589px;
padding:5px;
border:1px solid black;
}
*html .box { width:600px; }
This works, although it looks a little bit like a quick hack. Is there any other way of doing this? And also, which browser, in this case, isn't following standards correctly? Thanks, Ralph Hi there developers! im new here and desperately trying to be resonable at developing myself! i basically have an issue with my css, which is causing one of my drop down menus to appear slightly to the right in internet explorer - it looks spot on in firefox. i've googled this soooo much and heard about the 5 pixels problem between any browser and ie, but i cannot seem to fix it with all my changes made. see image - highlighted in red! Code: URL can anyone help me tidy this mess up please? this has taken me so long, because i wanted the locations of the drop downs to stay exactly in proportion when people zoom in and out of their browsers. html code: <div id="columnSubTop"> <div class="submenudropdown"> <div class="floatLeft width25 padL300 padTOP25"> <form action="search_for_vouchers_by_town" method="post" name="search" id="search"> <select name="fldCountyID"> <option value="">Please Select</option> <% While (NOT CountyList.EOF) %> <option value="<%=(CountyList.Fields.Item("fldCountyID").Value)%>"><%=(CountyList.Fields.Item("fldCountyName").Value)%></option> <% CountyList.MoveNext() Wend If (CountyList.CursorType > 0) Then CountyList.MoveFirst Else CountyList.Requery End If %></select> </div> <div class="floatRight width25 padR10 padTOP25"> <select name="fldTownID"> <% While (NOT TownList.EOF) %> <option value="<%=(TownList.Fields.Item("fldTownID").Value)%>"><%=(TownList.Fields.Item("fldTownName").Value)%></option> <% TownList.MoveNext() Wend If (TownList.CursorType > 0) Then TownList.MoveFirst Else TownList.Requery End If %></select> </div> </div> <div class="submenubutton"> <input type="image" src="images/search_button.gif" alt="Submit button" /> </form> </div> </div> CSS code: #columnSubTop { height: 85px; width:940px; margin: 0 auto; float:left; background-image:url(../images/css/subheader.gif); background-position: top left; background-repeat: no-repeat; clear:none; } .submenudropdown{ float:left; width:750px; } .submenubutton{ float:right; margin:0 auto; padding:24px 62px 0 0; } I created a CSS box where there's a header image & a css box under it, having 3 sides (no top border). It looks good in firefox, but can't get the box to close all the way (by meeting the header image) in explorer. There's a 2-3 px space there. li'l help please? |
|||||||