|
CSS - Dimensions Difference Between Ff And Ie
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. Similar Tutorialsim now omitting dimensions on some floating images and use easy clearing stuff on it...it seems to work but is this bad? or maybe theres better ways or something Media Example of the site BEFORE-HAND using Tables when viewed at 1280x1024. [Content Table Boxes Adjustable By Window Size] Image File HERE Since this archived picture version the following major changes have occured : -- Removal of Tables in Favor of full CSS/DIV -- Removal of PNG borders in favor of JavaScript/CSS Ones (Custom Coded) -- Additional box beside the main content box. -- W3C XHTML 1.1 Validatable. Site Package (Includes CSS, HTML and JScripts) Site Package HERE Issues Firefox * Content overFlows for content when window is resized too small. * Table width's are ignored (example : tIcon is set for width:32px yet expands/contracts) * <br /> tag induces too much space (adjusting line-height is a sloppy fix + causes IE to bug) IE 6 * Float bugs exist when window is resized too small. & MANY insane bugs insue as a result of the float bugs shifting content. * Main Box does not assume full 100% available space when no content is present Both * Header Content + Background Dissapears when horizontal scrollbars are used * Alternate DIV ONLY fix needed for grid layout (instead of the table I slid in) * Less absolute position approachs needed. (complicates strecthable atmosphere slightly) * Float should be replaced with display:inline (if possible -- I can't figure out how.) Comments I've tried almost everything I can think of to fix these and I am quite new to CSS/DIV structured sites. I would VERY MUCH appreciate any help that can be offered. At the moment, my target browsers are IE6 and Firefox. My layout is not liquid. everything is fixed position. If the veiwer adjusts his text size in his browser then part of the content text in the div's will be pushed out of sight because {overflow:hidden;} has me covered. How do I get the content in the div to become scrollable in this case? I don't know if it's possible but I don't really want to have scroll bars on my div's UNLESS the user adjusts text size and forces it to happen. Can this be done and if so any Ideas on how to do it? The title might seem like an oxymoron, but here follows what I want to do, for a navbar I am making, where the links are divided into categories, each with their own header div, I do not want those header divs to be visible unless there is any content (text) in them, but at the same time, if there is content in them, I want them to take specific dimensions. Is there a way to achieve this? That is, either do not appear at all, but if it is to appear, it is to be a certain specified height and width. The min- and max width/-height's do not do the trick here, however I suspect I am far from the first to want to do this so there ought to be a hack or solution of some sort. Maybe I should add that it is only the height that is an issue here really. I want it to be 19px lest not appear at all. Hi guys. Straight to pictures: Fig. 1: Differences in rendering between Standards compliant browsers and Internet Explorer. Link for html page is www.sential.co.uk/releases.html (this is my example page, but it's the same problem with all pages.) Now, apart from the fact they're different colors (which is a little strange), the positioning of the border images in IE is different than Safari/Firefox. I've tried playing with the code and positioning over and over with no luck. If I change one to look right, basically, the other ends up looking wrong. I have 4 corner images and 4 repeating borders. They're all positioned using css in my style sheet, in the format of, basically: Code: .corner_topleft{
position: absolute;
top: 0px;
left: 0px;
...
}
and so on in that respect for the 4 corners and: Code: .border_left{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background-repeat: x;
...
}
etc. for the borders. I have specified all the heights of the images. Now the problems in the pictures a #1: the left and right borders don't repeat down, #2: the right edge border+corners seem to be out 17px (the width of the border). Although don't think you can simply specify the right border to be inwards 17px because if you do that, in Safari/Firefox, the background blue color overflows 17px outwards (because it's currently underneath that right border. Although, apparently not in IE.) If any of you guys can offer any help, suggestions, or maybe even a fix, that would be awesome and very appreciated. Regards, -Luke (: Hi, Im interested in finding an app to create the layouts of my web in a visual way, you know creating the divs with the mouse dragging and droping the corners and the laterals of the divs. I have found Kompozer, but the position, the margins, etc, of the divs that you dimension, go directly to the HTML code (inline styles). Do you know any visual css editor that writes the dimensions, margins and position of the divs in a .css file? Ciao Hi all, After being away from the forums for some while I picked up the "webdesign-bug" again (it's raining during my summer holidays) but I'm having some troubles catching up with all new techniques/syntaxes at the moment. I did have a look at some tutorial sites and searched the forum for similar problems but somehow it's a bit overwhelming and I didn't find the solution I'm looking for yet. I do hope I didn't overlook something very basic or ask a frequently asked question (sorry then ) The goal I'm trying to make a (css-based) site with a central column with all 'normal' data. Below this central column I'd like to place some additional layers which are (partly) hidden underneath the main layer and which show themselves if you move with your mouse over the visible parts. The idea behind it is to create some 'desktop' where you have all kinds of things laying on eachother (like additional pieces of paper, some photographs, some money, ...). As an extra feature there would be another layer which makes sure there's a shadow from the 'main column' on the items below it. (Hope this is clear?) What I did so far To achieve this I thought I'd use different layers with different z-indexes and position them over and underneath eachother. So far I have the following code: html4strict Code: Original - html4strict 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"> <head> <title>Test Layers</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="style.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"> function show( obj ) { bla = document.getElementById( obj ); bla.style.zIndex += 10; } function hide( obj ) { bla = document.getElementById( obj ); bla.style.zIndex -= 10; } </script> </head> <body> <!-- CONTAINER --> <div id="container"> <h2 class="title">Quick Links</h2> <!-- SUBCONTENT --> <div class="subcontent1" id="subcontent1" onMouseOver="show('subcontent1');" onMouseOut="hide('subcontent1');"> Subtext1<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div> <div class="subcontent2" id="subcontent2" onMouseOver="show('subcontent2');" onMouseOut="hide('subcontent2');"> Subtext2<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div> <!-- CONTENT --> <div class="content_shadow"> <div class="content"> <h1 class="title">Site Title</h1> <div class="content_white"> <h2 class="title">Content Title</h2> Maintext1 </div> </div> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> css Code: Original - css Code * { margin: 0; padding: 0; } body { background-color: orange; } h1.title { display: none; } h2.title { display: none; } /******************************************************************** * CONTAINER ********************************************************************/ #container { border: solid 1px black; margin: 0 auto; width: 1000px; z-index: 1; /* background-color: lightgray;*/ /* filter: alpha(opacity=50);*/ } /******************************************************************** * SUB CONTENT ********************************************************************/ /* http://msdn2.microsoft.com/en-us/library/ms530301.aspx http://www.w3schools.com/htmldom/prop_style_clear.asp http://www.dynamicsitesolutions.com/css/layout-techniques/ */ #container .subcontent1 { background-color: lime; float: left; position: relative; top: 100px; width: 400px; z-index: 2; /* display: inline;*/ /* height: 200px;*/ /* left: 0px;*/ } #container .subcontent2 { background-color: lime; display: block; float: right; position: relative; top: 200px; width: 400px; z-index: 3; /* display: block;*/ /* height: 200px;*/ } /******************************************************************** * MAIN CONTENT ********************************************************************/ #container .content_shadow { background-color: gray; display: block; margin: 0 auto; opacity: .75; position: relative; top: 0px; width: 850px; z-index: 8; } #container .content { clear: none; margin: 0 auto; width: 800px; z-index: 9; } #container .content_white { background-color: white; display: block; height: 800px; margin: 0 auto; position: relative; top: 0px; width: 100%; z-index: 10; }
* {
The problem(s) Besides the (css)code probably being sloppy (and redundant at points?!?) since I experimented a lot with adding and removing of position-tags, floating-tags, etc etc.. it still fails to do what I'm aiming for. As can be seen on the attached screenshot most of it seems to be working (at least in FF2) (I had my mouse over the 2nd subcontent-layer btw) but the maintext1 won't start at the left of it's layer but instead starts on a x-coordinate where the 1st subcontent-layer finishes Can somebody point me to what I'm doing wrong? Also, if somebody has a relevant tutorial I'd appreciate it as well since I obviously need some extra exercise with this stuff (working on it already btw but you never know if there's another good one) Thanks for any help and if something isn't clear I'll try to explain it further! 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. 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;
}
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. 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 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 so what do each one do? 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. |
|||||||