|
CSS - Ie Positioning And List Font Size Help
Hello,
I am a current beginner to the web design game, and I am currently making my first website using CSS. As you may already know, I am having difficulties rendering my web site in Internet Explorer 7/8. My two main problems a 1.) IE won't resize the font size that I need to display my navigation bar correctly 2.) IE is positioning my wrapper slightly left of center pushing my navigation list off the template Here is a link to my page http://www.kyjocro.com/IAO/navproblem.html Here is the HTML HTML Code: <html> <head> <title>Title</title> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="styletest.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div id="container"> <div id="top"></div> <div id="bod"> <div id="wrapHeader"> <div class="headerLeft"></div> <div class="headerRight"><p>Call Now 888-467-6650</p></div> </div> <div id="navWrap"> <ul id="navigation"> <li><a href="#"><span class="currentTab">Independent Agents Online</span></a></li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link </a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Information & Insurance Resource Center</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a></li> </ul> </div> <div id="contentMain"> <h2>Welcome to Independent Agents Online!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. Nunc ligula massa, fringilla laoreet pellentesque a, consequat at eros. Suspendisse sem justo, ultrices ac hendrerit eget, porttitor eget arcu. Cras volutpat accumsan odio ut cursus. Integer a ipsum at libero semper eleifend at ac mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ultrices, augue sed rhoncus auctor, ligula lorem rutrum enim, nec congue ipsum mi eu massa. Vestibulum imperdiet interdum sodales. Ut condimentum consequat fringilla. Proin vestibulum porttitor porta. Integer elit turpis, sodales lacinia blandit sed, egestas at augue. Vestibulum ut felis sed eros pharetra interdum nec ut sapien.</p> </div> <div id="wrapColumn"> <div id="columnLeft"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. <center><img src="images/handshake.jpg" width="150" height="150" alt="" border="0" /></center> </div> <div id="columnMid"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. </div> <div id="columnRight"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. Nunc ligula massa, fringilla laoreet pellentesque a, consequat at eros. Suspendisse sem justo, ultrices ac hendrerit eget, porttitor eget arcu. </div> </div> </div> <div id="bottom"></div> <div id="footer">Site Map LegalAbout Us</p></div> </div> </div> </body> </html> Here is the CSS http://www.kyjocro.com/IAO/styletest.css Code:
body{ margin:0; padding:0; background: rgb(26,124,54); background-image:url(images/bg.png); background-repeat: repeat-x; text-align:center; /*IE POS Comp.*/}
h2{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; color:#FF0000; padding: 4px; padding-left: 0px; text-align:center;}
img { border:none;}
/*Containers*/
#wrapper{margin:0 auto; padding:0; height:auto; display:block; background-image: url(images/bg.png) repeat-x;}
#container{ margin:0 auto; padding:0; width:960px; height:100%;}
#top{ margin:10px 0 0 0; padding:0; float:left; display:block; width:100%; height:22px; background-image:url(images/top.png); background-repeat:no-repeat; text-align:left;}
#bod{ margin:0; padding:0; float:left; display:block; width:100%; height:auto; background-image:url(images/bgc.png); background-repeat:repeat-y; text-align:left;}
#bottom{ margin:0; padding:0; float:left; display:block; width:100%; height:22px; background-image:url(images/bottom.png); background-repeat:no-repeat; text-align:left;}
/*Logo Header*/
#wrapHeader{margin:0px auto; width: 960px; height:128px; background: url(images/bgc.png) repeat-y;}
.headerLeft{width:566px; float:left; background:url(images/logo.png) no-repeat; height:128px;}
.headerRight{width:382px; float:left; background:url(images/headerRight.jpg) no-repeat; height:128px;}
.headerRight p{ font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size:24px; color:#FF0000; padding:60px 0 0 100px;}
/*Navigation Bar Code*/
#navWrap {margin: 0 auto; width: 940px; font-size: 12px;}
#navigation {overflow: visible; font-size: 13px; font-family: verdana, arial, helvetica, sans-serif; padding:1px; width: 960px; margin: 0 auto; font-variant: small-caps; }
#navigation li { float: left; list-style: none; background-color: rgb(26,124,54);repeat-x; width: 115px; border: 1px solid black;}
#navigation a {display: block; background-position: top right; background-repeat: no-repeat; color: white; text-decoration: none; font-weight: bold; }
#navigation span {display: block; background: url(images/navbg.png) repeat-x; padding: 1px 0px; text-align: center; min-height: 50px; font-variant: small-caps; height: 50px;}
#navigation span.currentTab {background: url(images/navbghover.png) repeat-x; border-bottom:none;}
#navigation a:hover {background-position: right -198px; }
#navigation a:hover span {background-position: 0 -198px; background-color: red; background: url(images/navbghover.png) repeat-x; }
#navigation li ul {position: absolute; width: 115px; left: -999em; margin-left: -41px; font-size: 12px; color: black; font-weight: normal; font-variant: normal;}
#navigation li ul a, #navigation li ul a:link {background-image: none; padding: 2px 0px; width: 115px; background-color: rgb(173,204,239); color: black;}
#navigation li ul a:hover {background-color: rgb(128,187,150);}
#navigation li:hover ul, #navigation li.sfhover ul {left: auto;}
.contactBreak p {line-height: 3px;}
/*Main Body*/
#contentMain {margin: 0px auto; width: 960px; float: left; padding: 10px;}
#contentMain p {padding: 10px 30px; text-indent: 30px;}
#contentMain img {float: left; padding: 0px 10px;}
.getQuote {width: 200px; float:left; padding:5px; border: 1px solid black;}
.getInfo {width: 200px; float:left; padding:5px; border: 1px solid black;}
.getManage {width:200px; float:left; padding 5px; border: 1px solid black;}
/*COLUMN WRAPPER AND DIVS */
#wrapColumn{
overflow: auto;
float: left;
width:960px;
margin: 0px auto;
background-image: url(images/bgc.png);
}
#columnLeft {
border-top: 2px solid #046004;
padding: 10px;
margin-left: 10px;
width:230px;
float: left;
background-color:white;
min-height: 600px;
}
#columnMid {
border-top: 2px solid #046004;
padding: 10px;
width: 404px;
float: left;
background-color: white;
min-height: 600px;
}
#columnRight {
border-top: 2px solid #046004;
padding: 10px;
width:230px;
float: left;
background-color:white;
min-height: 600px;
}
/* Footer Copyright Legal*/
#footer {margin: 0 auto; display:inline-block;}
I realize that my drop down doesn't work in IE either, but that might be too complicated for me to understand at this point since I kind of frankensteined it from various examples. Much thanks in advance Similar TutorialsHi there, I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right. Code: <font color='white'><font size='1' face=verdana size=1> I couldn't find the equivalent of this in CSS This is my last experiment but it doesn't seem to work either Code: fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}
Thanks So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0, How do you get a simple tag like body { font-size:small; } to be equal in all browsers? Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way? By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it. It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering. B Hello, I have something has follows: <div> ... <table> ... </table> </div> My document font size is 1em. My div font size is 1.4em. What should be the font-size in my table to get back to the 1em of the document? Thanks, Miguel People viewing my site at 120 dpi are seeing misaligned text and layout, whereas people viewing the site at 96dpi can see it properly. I'm using "em" instead of pixels when setting font sizes in CSS. The site has fixed length and width, do I HAVE to allow it to resize itself? Whats the best way to fix font size? I use CSS. The font size seems to stay fix on IE but not on Mozilla and Netscape. Also I notice when I use adgui font it stay fix no matter in what browser and no matter at what text view. Why is that. Are there more of this kinda fonts? Bottom line, whats the best way to fix the size of fonts regardless of browser and at what text view. Thanks for you help Liz hi, someone using foxfire keeps saying the my font is really really tiny, I have my css file like:
Code: body { background: #FFFFFF;
/* for internet explorer */
scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-3dlight-color: #494969; scrollbar-arrow-color: #494969; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #494969;
margin: 0px; padding: 0px; border: 0px; border-top: 1px solid #8E9397; border-left: 1px solid #8E9397; font-color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 8pt; text-align: left; }
a:link,a:active,a:visited { color: #494969; text-decoration: none }
a:hover { text-decoration: underline; color: #494969; position: relative; top: -1px; left: -1px; }
hr { background: transparent; color: #494969; height: 1px; border-width: 0px; }
fieldset { margin: 0; padding: 1px; border: 1px solid #494969; }
legend { margin: 0; padding: 7px; color: #494969; background: transparent; font-weight: bold; }
img { border: 0px; }
table { background: transparent; }
tr { background: transparent; }
td { background: transparent; color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 70%; }
input, textarea, select { color: #494969; font: normal 11px Verdana, Arial, Helvetica, sans-serif; background: transparent; border: 1px solid #494969; border-style: inset; text-align: center; text-indent: 2px; }
form { margin: 0px; padding: 0px; }
any idea on whats wrong? and I would of changed the % to an actual value but I wanted to make it so people can control the size of the font to lager or smaller here is a preview with that css file in use : http://www.dbznetwork.net/ Well, the title might be a little oversimplified, but I guess it caught your attention In the past, I always set my font sizes using px. I know that this is not the appropriate standard (since it doesn't allow a user to re-size the font on their end), but I usually did it because it was easiest and most predictable. Now, I finally want to make the step towards more accessibility and I would like to learn a little bit more about using em's appropriately. Does anyone have any good advise on how to get started with the following questions: How/where do I set the initial font-size, from which I can use em's? What are the dangers of using em's instead of px? Where could this change impact my usual styling? Are there any good resources/tutorials about this? Any help/suggestions/ideas are appreciated... built a drop down using array... i did it this way so if they omit another item in page, the county they selected will reappear..but how do i change the font size of the county names in the array....they appear in such small print???? had posted in php forum, but someone suggested posting here... PHP Code: <table width="100%"> <? if( ($msgcounty == "e") && (isset($_POST['submit'])) ) {?> <tr> <td><font face="Arial, Helvetica, sans-serif" size="2" color="#ff0000"><b>County: </b></font> <? } else { ?> <tr> <td><font face="Arial, Helvetica, sans-serif" size="2" color="#000000"><b>County: </b></font> <? } ?> <? $county = array (1 => 'county', 'Adams County', 'Allen County', 'Wells County', 'White County', 'Whitley'); foreach ($county as $key => $value) { if ($countyselecter==$value) { $optionselected = "selected"; }else{ $optionselected = ""; } $selectcnty.= "<option value=\"$value\" ".$optionselected."> $value</option>\n";} ?><select name="countyselecter"> <? echo $selectcnty; ?> </select> </td> </tr> </table> Hi I have applied this style to a drop down. However, the font size only appears at 10px in FF and not IE. Any ideas why? <option style="font-family: Verdana; background: #E0EAF8; font-size: 10px;" value="link">link text</option> I have set up a test for several basic CSS-layouts, like 3-column layout, frame-like layout/behaviour etc. and I noticed some strange behaviour in IE. Here is a number of layouts that I have created: http://www.duwgati.nl/csstest In layout samples 1 - 4 the fonts show up smaller than in the samples 5 -7, even though the font-size declaration is identical in all 7 samples. This only happens in IE, in Mozilla/Firefox, the fontsizes are correct in all 7 samples. Anybody got a clue why this is happening? Hi there, I have a font size problem. Basically, some of the text on the page appears as size 14 verdana, where as the other text appears how i want it. I want the text to be displayed as 11px tahoma. This is what i am using: PHP Code: BODY { margin:0px; padding:0px; font-family: tahoma, verdana, arial; font-size: 11px; } Also, some text is in a <p> tag. How do i define that? Many thanks What is the best way to make compatble text size between browser? I have a div with a width of 300px, I pasted some text in it, it appears identical with firefox, chrome and safari (the letters are the exact same place), but when it comes to IE 8 (probably 6/7 too), the text is not displayed at the same place. I have a style.css file included on all pages i want to sent default font and size, for all the text where i haven't already set something ok so basically my MAIN browser is Opera which I use it 99% of the time. Now when I try viewing my site in Internet Explorer, font size looks SMALLER than the one I see in Opera. Of course the solution would be simple - bump up the font size but then the font looks TOO BIG in Opera. how to equalize these font sizes in both browsers? also, is this the correct usage for setting font size? Code: body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a {
font-size: 12px;
}
EDIT: this message I wrote right now, looks EXACTLY the same in both browsers. Fonts match up perfectly. what did the admin do for font property? I know this topic has been discussed a number of times in the past and I have read some of them. Kravittz I do appreciate all your knowledge in this area as you have answered a lot of my questions already. But I do have a few problems yet. I am switching now to set the font size in body as Code: body {
font-family:Verdana, Tahoma, Arial;
font-size: 85%;
color: #000000;
background-color: #FFFFFF;
}
(actually not sure if I like Verdana or the good ol' Arial first. that is a different question) Anyway, I set the font to 85% for body. then for <p> Code: p {
font-size: .8em;
}
That seems to look fine. but first question is for links <a>. I have some links that are just be themselves or sometimes in a <div> tag. Those ones are very large. So I set the size like this. Code: a:link {
text-decoration: underline;
color: #000000;
font-size: .8em;
}
that works fine but them for the few links that are inside of a <p> tag it seems to adjust the size twice, once for <p> tag and then again for <a> tag. Thus making it twice as small as I really want. How do I fix that? Do I need to make a whole bunch of psuedo classes for all those instances? Seems like there should be an easier way. Any suggestions? Thanks! 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;
}
I need to shrink the fonts for the following classes on blogspot: post-body date-header but for some reason it refuses to shrink below 100% or 1em Even in firebug, adding properties to element.style, the font refuses to shrink below 100%. Even when i switch off all inherited values for font values it refuses. It does however grow to any size larger than 100%. Other elements' fonts do shrink to any value, it is only these (and possibly others) that do not shrink. blogspot in question is http://secretfarts.blogspot.com Any ideas? I've read several books such as Dan Cederholms, "Web standard solutions" and Eric Meyers on CSS, but I've yet to come across anything that delves into the specifics between declaring font-size attributes of px, %, em . I've always kind of used px for my sites, but I've seen some sites that use percentages and others that use em. What are the best uses for each one? How exactly does the % and em know what size to be? FYI: I didn't mention 'pt' because I do in fact know the purpose of it for printing web documents. Feel free to discuss or even post a great link that covers everything. Thanks! Is there any way to limit how large a font can become in firefox and internet explorer? |
|||||||