|
CSS - Div Sizes
http://m-i-x.net/beta
basicly i want the 2 sides heights to be the same as the height of the content...how can i do it? Similar TutorialsI have an absolutely positioned login form that I am having some troubles with... On IE7 and the latest version of Fx it looks great. In some older versions of Fx (1.04 is what I have to test with...), the input size is off compared to the width of the div... And in IE6, the email input is actually wider than the password input (which is really weird since the inputs are set to a size of 25) Is there a better way to do this... What I want is to have the input fields the same width, with the submit button aligned along the right edge and to have the labels of the input fields aligned left. Or, if I am doing it the right way, what's the deal with IE6? I'm not too worried about the older Fx versions since it doesn't look all that bad, but on some computers with IE6, the box actually starts to push too far to the right for some reason... Hi, I'm new to CSS and am trying to deign a navigation bar for a website. The problem that i face is trying to size the headings a little larger than the sub catagories. The code is as follows for the style sheet i have tried this: body{ font-family: Arial,sans-serif; color: #FFFFFF; line-height: 1.1; margin: 0px; padding: 0px; } a{ color: #FFFFFF; text-decoration: none; } a:link{ color: #FFFFFF; text-decoration: none; } a:visited{ color: #FFFFFF; text-decoration: none; } a:hover{ color: #FFFFFF; text-decoration: underline; } b{ color: #FFFFFF; text-decoration: none; } b:link{ color: #FFFFFF; text-decoration: none; } b:visited{ color: #FFFFFF; text-decoration: none; } b:hover{ color: #FFFFFF; text-decoration: underline; } #navBar ul b:link, #navBar ul b:visited {display: block;} #navBar ul a:link, #navBar ul a:visited {display: block;} #navBar ul {list-style: none; margin: 0; padding: 0;} /* hack to fix IE/Win's broken rendering of block-level anchors in lists */ #navBar li {border-bottom: 1px solid #EEE;} /* fix for browsers that don't need the hack */ html>body #navBar li {border-bottom: none;} /*********** #sectionLinks styles ***********/ #sectionLinks{ position: relative; margin: 0px; padding: 0px; border-bottom: 1px solid #0033CC; font-size: 70%; background-color: #112059; } #sectionLinks h3{ padding: 10px 0px 2px 10px; } #sectionLinks a { display: block; border-top: 1px solid #cccccc; padding: 2px 0px 2px 10px; } #sectionLinks a:hover{ background-color: #0033CC; } #sectionLinks2{ position: relative; margin: 0px; padding: 0px; border-bottom: 1px solid #0033CC; font-size: 130%; background-color: #112059; } #sectionLinks b { display: block; border-top: 1px solid #cccccc; padding: 2px 0px 2px 10px; /*font-size: 130%;*/ } #sectionLinks b:hover{ background-color: #0033CC; } and i have the following code in the htm page: <STYLE> BODY { scrollbar-arrow-color:094588; scrollbar-shadow-color:f0f0f0; scrollbar-face-color:f0f0f0; scrollbar-highlight-color:094588; scrollbar-darkshadow-color:094588; .style1 {font-size: 16px; background-color: #112059; background-color: #FFFFFF; } a:hover { color: #FFFFFF; } .style1 {color: #FFFFFF} b:hover { color: #FFFFFF; }.style1 {color: #FFFFFF} </STYLE> <div id="navBar"> <div id="sectionLinks"> <div id="sectionLinks2"> <h3 class="style1">Menu</h3> <ul> <li><b href="index.htm">Home</b></li> <li><b href="product.htm">Products</b></li> <li><a href="index.htm">Computer Systems</a></li> <li><a href="products.htm">Components/Peripherals</a></li> <li><a href="#">Laptops</a></li> <li><a href="#">Refurbished</a></li> <li><b href="services.htm">Services</b></li> <li><a href="#">PC Repairs</a></li> <li><a href="#">Upgrades</a></li> <li><a href="#">Home Networking</a></li> <li><a href="#">In-home training</a></li> </ul> </div> </div> </div> However this only allows hyper links to work that are defined under a href not the larger b href as I so want, I know this is complicated and long winded but can anyone lend some usefull solution to my problem? Yours greatfully. I'm trying to write a website at the moment and I want to use <h1>/<h2> etc for the headings. Problem is though, the heading is going in to a blue bar and the font needs to be the right size. And naturally, IE and FF display the font in different sizes How would I fix this problem so that the font renders the same size? Could I make a hacked CSS class that only IE can see that I can apply to the <h1> tag to change the font-size to make it the same size as FF displays it as? I have used this in my CSS: p { margin-top: 0.5em;} But it renders differently in IE6 and Netscape 7. Is there a method to get this equal in both ? Thanks. I'm making a blog layout for someone, but I'm having problems with compatibility. I have not put in all the blog code yet, so don't tell me about that. My problem is that my scrolling div elements do not scroll in firefox. They work fine in IE though. I've tried everything I can think of. Firefox only resizes the table to fit the text, but I want scrollbuttons and a 90% high by 90% wide table.I want it to be compatible with as many resolutions as possible, so I am not really interested in going down the route of absolute table sizes, and even that doesn't seem to work either. Any ideas? If you can tell me what to do, please e-mail me: My email address Actually, on second thoughts you can just reply to this post. The CSS I tried: Code: <html>
<head>
<title>JM Beta</title>
<style type="text/css">
body {
background-color: #000;
}
table.main {
background-color: #fff;
border-style: solid;
border-width: 2px;
border-color: #666;
height: 90%;
width: 90%;
padding: 0px;
}
h3 {
font-size: 10px;
font-family: arial;
font-color: #000;
}
td {
border-style: solid;
border-width: 2px;
border-color: #666;
background-color: #fff;
padding: 10px;
}
div.scroll {
width: 100%;
height: 100%;
background-color: #fff;
overflow: auto;
font-size: 10px;
font-family: arial;
text-align: justify;
}
div.norm {
width: 100%;
height: 100%;
background-color: #fff;
font-size: 10px;
font-family: arial;
text-align: justify;
}
</head>
</html>
I've recoded my previous version which fixes a span problem, but end up with the rows not being able to use different widths & the image spanning the column width from the first row... div.bg_tp_lt = row 1 @ 105px div.bg_ct_lt = row 2 @ 53px div.bg_bt_lt = row 3 @ 68px So if you can either see what I'm doing wrong or provide a more reliable method it would be greatly appreciated. Thanks in advance. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>$var</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles/styles2.css" media="screen" />
</head>
<body scroll="no">
<div class="table">
<div class="tbody">
<div class="tr">
<div class="td bg_tp_lt"></div>
<div class="td bg_tp_ct"></div>
<div class="td bg_tp_rt"></div>
</div>
<div class="tr">
<div class="td bg_ct_lt"></div>
<div class="td bg_ct_ct"><div class="content">$content</div></div>
<div class="td bg_ct_rt"></div>
</div>
<div class="tr">
<div class="td bg_bt_lt"></div>
<div class="td bg_bt_ct"></div>
<div class="td bg_bt_rt"></div>
</div>
</div>
</div>
</body>
</html>
Code:
div.table {
display: table;
border: 1px solid #DDDDDD;
padding: 0px;
width: 404px;
}
div.thead {
display: table-header-group;
}
div.tbody {
display: table-row-group;
}
div.tr {
display: table-row;
}
div.td {
display: table-cell;
border: 0px solid #DDDDDD;
padding: 0px;
}
div.bg_tp_lt {
width: 105px;
height: 60px;
background-image:url(images/stl.jpg); no-repeat;
background-color: #000000;
}
div.bg_tp_ct {
width: auto;
height: 60px;
background-image: url(images/st.jpg); repeat-x;
background-color: #000000;
}
div.bg_tp_rt {
width: 105px;
height: 60px;
background-image: url(images/str.jpg); no-repeat;
background-color: #000000;
}
div.bg_ct_lt {
width: 53px;
height: 150px;
background-image: url(images/sl.jpg); repeat-y;
background-color: #000000;
}
div.bg_ct_ct {
width: auto;
height: auto;
background-color: #000000;
}
div.bg_ct_rt {
width: 53px;
height: 150px;
background-image: url(images/sr.jpg); repeat-y;
background-color: #000000;
}
div.bg_bt_lt {
width: 68px;
height: 64px;
background-image:url(images/sbl.jpg); no-repeat;
background-color: #000000;
}
div.bg_bt_ct {
width: auto;
height: 64px;
background-image: url(images/sb.jpg); repeat-x;
background-color: #000000;
}
div.bg_bt_rt {
width: 68px;
height: 64px;
background-image: url(images/sbr.jpg); no-repeat;
background-color: #000000;
}
/* Little hack for IE */
* html div.td { display: inline; }
This is an old subject, and sore spot with everyone, I know. But I like to do a "check-up" from time to time, to see if there are better ways to do this .... When implementing a tight design, where I cannot afford much deviation in font size from the original design, I find the differences in browsers/versions/OS to be... well... rediculous. Some time ago I went about normalizing this by specifying font sizes in CSS with the em specification. i.e. font-family: serif; font-size: 0.6em; I then have a piece of javascript included in every page that detects the OS, OS version, browser and browser version.... and writes the CSS <LINK REL=stylesheet statement to use a particular CSS file. I started out with three CSS files: Mac, Windows MSIE7 and Windows MSIE6. Now, expecially with Vista, I'm up to 7 different CSS files in all. This controls fonts very well. And it's not really that much trouble, since you just create the first CSS as you design, then copy that to the other 6 files, and just make font size adjustments. HOWEVER - is this sane? Is there a better way? (keep in mind that our designs require tight control.) Any thoughts much appreciated. I have been doing this joomla site for someone here The problem is he says when its viewed on a 22" screen with a screen resolution of 1200x800 it does not view right in IE, check images on this post. I have not seen any of the problems on a 15, 17 , 19 and 42 " screens Can anyone else see any problems could you also check load times he said it was slow. An help would be great as i can't see the problem Here is some code I've started for a project. It is for IE 5+ and uses filters. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body id="bodyid" bgcolor="f3f3f7" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no"> <script language="JavaScript1.1"> function resizePage(){ windowHeight = (document.getElementById('bodyid').clientHeight - 60); document.getElementById("bottomTable").style.height = windowHeight ; } </script> <style type="text/css"> .tddrop { filter: progid:DXImageTransform.Microsoft.dropShadow(Color=DDDDDD,offX=3,offY=3,positive=true); border: solid #c0c0c0 1px; background-color: #ffffff; } .spacer{width:15px} </style> <table border="0" bgcolor="#34487E" style="width=100%" cellpadding="0" cellspacing="0" > <tr valign="top"> <td style="height:50" valign="middle" > <!--- Top bar including left image ---> <table border="0" cellpadding="0" cellspacing="0" style="width:100%;height:100%" > <tr> <td> <!---- image here... ----> </td> <td style="width:100%;filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=1, StartColorStr='#34487E', EndColorStr='#C5D1E1')"></td> </tr> </table> </td> </tr> <tr><td style="height:1" bgcolor="#7c7c94"></td></tr> <tr> <td style="height:10;filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#f3f4fa', EndColorStr='#9997b5')"> </td> </tr> <tr><td style="height:1" bgcolor="#7c7c94"></td></tr> </table> <table id="bottomTable" border="0" style="width:100%;height:300" cellpadding="0" cellspacing="12" > <tr> <td class="tddrop" style="width:180;"> </td> <td class="tddrop"> </td> </tr> <script>resizePage();</script> </body> </html> Notice that between the two colums, the <td>'s are not lining up at the bottom. If you remove the shadow filter they line up fine. Anyone have an idea why this might be so? Thanks I heard people complaining about "accessibility", so i finally designed a site with relative font sizes. my default font sizes are 90% of whatever the browser default would be. to my horror, i see that indented lists that contain indented lists get progressively smaller.... can someone suggest how to prevent this while still letting allowing variable font sizes? many thanks. dan Hey guys. I am increasing the size of my radio buttons using: input {width: 20px; height: 20px;} However. The radio buttons show much smaller in IE than firefox. Anyone have any clues how I can make the buttons semi-equal in size between browsers? Thanks. -Andrew I was in a meeting today talking about relative font sizes and how they can be problematic, because nesting elements may increase or decrease their font size. A co-worker said that I could use !important in my CSS to override/ignore the font-sizes of any nested elements. He seems to be way off. The W3C says that !important is really just about user versus author stylesheets, and apparently declaring !important in an author stylesheet doesn't do anything. So first question -- am I right about !important? It's only about user and author stylesheets, yes? Second question -- When dealing with relative fonts and nested elements, you have to start writing pretty complex rules, right? Is there any easy way in CSS without writing multiple rules to say "regardless of what element I place you in, always be x% font size..."? Hi All I have been contacted by a visitor to one of my sites to let me know that the fonts on a menu are too large but only on Chrome and Safari. I'm struggling to figure out why the web-kit browsers are enlarging the fonts so much any help that I can get from you guys would be gratefully received. Font size is fine FF3.5 and IE8 Site is http://www.pwfs.co.uk and its the horizontal navigation menu that the issue occurs. Hoping someone can help John Hi there, I have two font sizes: 22px and 12px. However, If I use the 2 sizes next to each other, the large pushes the smaller on down. I tried to use vertical-align: middle to center them vertically, but it didn't work. How can I center them vertically? Thanks! Good Day, Trying to setup the font sizes for my site. In higher resolutions, everything seems to look acceptable. When I view the page on a low resolution screen, everything seems ridiculously large. Is there anyway to set the styles up to relieve this problem? Best, Colin Hi, If you set a font-size: 7pt and font-family:Verdana in your stylesheet, does the text in your webpage look slightly bigger in Firefox than in IE 6? I'm using Windows by the way ... this is just a general question as some of my menu links are lined up well on IE (which displays text a bit smaller) but overlapping to multiple lines on Firefox (because the text size is slightly bigger) Many thanks! PHP Code: #searchBox { float:right; margin:0em; padding:0em; margin-right:0.2em; clear:right; background-image:url(/images/site/backgrounds/searchBox.jpg); /*border:black solid 1px;*/ } #searchBox input { margin:0em; padding:0em; background-color:#d2c5a2; } .submit { background-color:#6F5F42;; color:#483e2b; font-size:smaller; font-weight:bold; margin:0em; padding:0em; } and html PHP Code: <div id="searchBox"> <form action="search.php" method="post" style="margin:0em; padding:0em;"> <fieldset style="border:1px solid #a29383; margin:0em; padding:0.1em;"> <label>What are you shopping for?</label><input type="text" name="search" size="14"/> <input class="submit" type="submit" name="submit" value="Search" /> </fieldset> </form> </div> i dont know but for some reason in firefox the three elements of form (label, input & submit) are on the same line but in IE they are in two lines.. I have just tried width:55%; but the submit box goes outside the top box.. but in FF the searchbox goes haywire and take the whole box!! also is there anyway to make sure that the font sizes are same/similar in both IE and FF? http://www.zahra-zahra.com/fullpage.html EDIT: to say i have tweaked it and firefox problem is solved but IE still puts the form OUTSIDE The box.. Confusing title I'm currently trying to create a layout similar to what iGoogle (Google's Interactive Hompage) does. I want to have modules that users can add to their homepage, and I want them to be able to sort them by dragging them around the page using AJAX. I'm trying to use the Scriptaculous floated sortables to do this (http://wiki.script.aculo.us/scriptaculous/show/SortableFloatsDemo). I can get an iGoogle-style layout working fine. However, I have a twist that I can't figure out Rather than having three columns, I want to let the modules have a variable width/height (and by this I don't mean anything - the width will either be one, two or three columns wide, and the height will increase in 100 or 200px amounts up to around 500px). Here's a diagram of what I'm after: http://andrew.estyles.com.au/columns.gif So basically not after a column layout, just an ad-hoc layout where they just slot in wherever they can. Is this possible to do? Anyone have any pointers on where to start? Thanks Hi all, Is there any way to make the View-Text Size work in CSS - or more specifically, is there any way to limit how large or small the text becomes? I know you can use 0.8em font sizes, but I don't want the font to them become too large or small when adjusted, so is there any way to limit this? Thanks. Hello everyone! I'm creating this thread to make a question about something that is happening with my website... Actually I'm not a professional in CSS Coding... I only know some basics and with the help of some friends I've created it (which sadly they doesn't know how to help in this problem as well). I know more HTML than CSS, but to center the website horizontally and vertically I had to change it to CSS Coding. At first, since I use Firefox as the principal browser, I thought it was going right and well centered, but when I opened it in another browsers as Internet Explorer and Opera, the various parts of texts I have included are not well positioned like in Firefox, Google Chrome and Safari, by which looks pretty decent and in the same position in all of them. Unfortunately, since I'm a new member, I can't post links, so I placed some spaces in between at the beginning to be possible: Website: ht tp://w ww.freewebs.com/innocentia/Doc1.htm Errors Preview: ht tp://img651.imageshack.us/img651/1601/errorspreview.jpg Horizontally looks great in any browser and the Menu Bar as well, but not the right text parts...by which vertically looks different to me in IE and Opera only and in the other browsers as well if the monitor sizes are bigger or smaller than mine, which has the size of 1440x990. The CSS Code of the texts parts that can't get vertically fixed is: Code: #header {
height : 60px;
left : 300px;
overflow : auto;
padding : 10px;
position : relative;
top : -100px;
width : 700px;
}
#header p {
margin : 0;
}
#header_wrapper {
width : 700px;
margin-left : auto;
margin-right : auto;
margin-top : 25px;
}
#h3 {
height : 130px;
left : 290px;
overflow : auto;
padding : 20px 10px;
position : relative;
top : -25px;
width : 710px;
}
#h3 ul {
margin : 0;
}
#h3 ul li {
margin : 0 0 3px 0;
}
#h4 {
height : 255px;
left : 250px;
overflow : auto;
padding : 0 10px;
position : relative;
top : -85px;
width : 748px;
}
#h4 ul {
margin : 0;
}
#site_wrapper {
width : 1100px;
margin-left : auto;
margin-right : auto;
background : #eaf0f2 url(link) no-repeat top center;
}
The HTML Code is: Code: <body>
<div id="site_wrapper">
<div id="header">Text</div>
<div id="h3">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top">Avatar Picture</td>
<td valign="top">
<ul><li><b><font color="#0166AC">Text</ul></td></tr>
</table></div>
<div id="h4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top">
<ul><p><font color="#000000"><b>Text</font></b></a></center></ul></td></tr>
</table></div>
I really don't understand what's happening or what I'm missing due to the fact that the menu has the same type of coding like the headers and works completely fine...so I'm somehow lost... My intention was to make it look correct horizontally and vertically like it's shown in Firefox, Google Chrome and Safari in the preview picture, in the other browsers and any different monitor sizes. Also, I already validated my CSS coding! I also searched for many threads to see if I could find solutions but hadn't found any that could actually help... Thank you for the attention and for reading! ^^ |
|||||||