|
CSS - Easy One - Ie Is Fine - Mozilla Spacing And Fonts Wrong
Similar TutorialsI have built a site using css for font styles. On my mac the fonts show up fine but when I view the site on Windows XP using Internet Explorer the fonts look kinda blurry/washed out. I'm using Arial, at 12px or 13px bold, as set in my CSS file. Is this a common problem, a way to fix the problem, or just my own problem? thanks for the help. I have a layer with some text, (the code is not mine) in IE it does what I want: It shrinks when the user makes the browser window smaller, in mozilla however, it doesn't work like that. What is wrong here? I must admit, that programming for every browser is not my best side, and I think I'd be better to make mozilla the reference instead of IE. but for now, maybe someone can help out? the code: Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>One Hundred Percent height Divs</title>
<style type="text/css" media="screen">
html{height:100%; width:100%;}
body {
margin-top:100px;
padding:0;
margin-bottom:199px;
height:100%; /* this is the key! */
}
#right {
margin-left:300px;
width:200px;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
overflow:auto;
border:11px solid #333;
}
#right p {
padding:0 10px;
}
</style>
</head>
<body>
<div id="right">
<p class="top">To solve an inheritance issue displayed in div #right as rendered in Opera, class p.top
using margin-top:20; is applied to the first paragraph of each outer divs.</p>
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
</body>
</html>
many thanks!! Greetings... I've looked all around for a solution, and can't find one. Any help that anyone could provide would so greatly appreciated. My site http://www.baltimoregamers.com displays the div boxes incorectly in Firefox. I am using quite an unusual layout with one big picture as a plate for the entire site... I then lay div boxes/layers ontop of the plate to position text exactly where I want it to go. It works flawlessly in IE, but displays a too far down and to the right in FF/Mozilla. I am new to using CSS and I'm sure that something is off somewhere in the code. Thank in advance for any help. Feel free to e-mail me he dekay@baltimoregamers.com http://www.refinethetaste.com/step3.htm Can someone tell me why this page appears perfectly fine with ie but appears awfully wrong with firefox. I am almost done with the project, please help..... s.o.s Code:
style>
/*review order*/
#checkoutprocess { width:576px; float:left; margin-right:2px; }
#checkoutprocess .checkoutprocess { float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#checkoutprocess h1 { height:30px; font-size: 18px; color:#716759; line-height:30px;}
#checkoutprocess .checkoutprocess .thdesc { float: left; width:264px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; }
#checkoutprocess .checkoutprocess .th { float: left; width:70px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#checkoutprocess .checkoutprocess .thh { float: left; width:568px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; }
#checkoutprocess .checkoutprocess .tddesc { float: left; width:274px; height:80px; font-size: 14px; color:#716759; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .color { float: left; width:70px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .noncolor { float: left; width:70px; text-align: center; color:#716759; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .intprice { font-weight:bold; }
#checkoutprocess .hline { border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }
#checkoutprocess img#updatesbasket { float:left; width: 141px; height: 15px; border: 0px; }
#checkoutprocess img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#checkoutprocess img#contshopping { float:right; width: 141px; height: 25px; padding-right:50px; border: 0px; }
#checkoutprocess img#checkout { float:right; width: 89px; height: 25px; border: 0px; }
</style>
I added a tab content js to my main page. I did not change anything at css file. Area where I added tab content js works fine with Firefox but not with Internet Explorer. What happens with IE is that contents at the center of the page moves under. I am not sure if I clearly described the problem. Please take a look at: http://www.pearl.ru/isdunyasi/ Is it possiable for me to add an external font family on a certain text? I mean.. Is it possible for me to use ttf fonts on css to modify my html page? P.S: I hope It makes sense.. because I'm tired style { #test{ margin-left: 5px; margin-top: 9px; font-family: arial; color: black; font-size: 9px; } } <!-- html --> <div id="test"> <span> X Y Z </span> </div> Here is my problem. I am trying to make "Y" bold. but it appears in regular font. I tried following code which doesn't work for me. <span> X <span style="font-weight: bold;">Y</span> Z</span> Thanks Hi all, I'm trying to use my own hosted font for my website, namely Futura Light. I had been using the Google Font API, so to host my font I change the URL in the CSS from the google hosted font to a local address where my font is. This worked really well on Firefox, safari and Chrome, but IE8 is still showing my generic fonts. Why would IE8 not show my hosted font, while other browsers do? Help is very much appreciated! Ray I was wondering how I can set a font that others may not have on there computer. I know I can set a font folder for my site but how do I link to that so that if the viewer doesn't have the font so it will still display correctly for them too? What type of font extension should I put in there? Should it be just the .ttf? Are there any special css rules that I must include? Thanks for the help! Ive seen some sites using fonts i dont have on my computer how is this done and whats it called ? any help would be great. I've been looking at some CSS templates over at the Yahoo Developer Network. Link: http://developer.yahoo.com/ypattern...hp?pattern=grid They define font sizes as percentages (13 pt. is about 100%), and I had never seen this. See he http://developer.yahoo.com/yui/fonts/index.html Is this common? Uncommon? Is there a reason I haven't seen it before, or am I blind? Also, in general, have anyone here used these templates as a basis for anything? can I load a special font to my server and then call to it through css? If I want to use the font Made_In_China.tff can I actualy load it to my server and then call to it through css? Nick I'm pretty certain you can do this - but for the life of me I can't remember where I read this. Code:
<style>
@import font("fonturl")
</style>
or Code:
<style>
@font url("fonturl")
</style>
I'm still searching online. Anyone else have any ideas? thanks hello, what's the best way to create a border around txt (i mean the letters themselves not around a block of txt)? i've seen some people do this with glow but in most cases it looks awful and even worse, it doesn't seem to work in other browsers other than IE. is there some trick that i can use to achieve this effect? thanks for any help! if i upload a load of different fonts to my web server, i presume i need to link them to CSS, before i can use them. how do i do this? if not, what do i need to do instead? Each browser keeps displaying my website with a different font. It makes no difference to the layout of the page, but I'd like it to be the same font in all of them just for the sake of consistancy. Are there any fonts out there that work for all of them? Can I upload a font type to my server to send to browsers? I want a kind of 'courrier new' , 'arial' or 'tahoma' font really. Any help is greatly appreciated Hi all.. i'm new to php... ive got a php genereated page that i need to display in a css generated font... i can kind of get it to work using the normal <class="font"> at the top of the page but it seems to ignore the pixel size. Am i doing it completely wrong? i need a *simple* solution if thats possible, and without too much jargon much appreciated.. adi I am having some difficulty getting text to render how I want it. The page in question can be viewed he http://www.cbo4edu.org/who.html The column of text on the left is bolded for some reason and I want it match the text on the right (unbolded). I have setup an External style sheet and the only code I've applied to type is: PHP Code: .footer { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; } body,td,th { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } body { background-color: #000000; margin-left: 0px; margin-right: 0px; The HTML code: PHP Code: <th colspan="4" rowspan="24" align="left" valign="top"><p>College Bound Opportunities (CBO) is a not-for-profit organization centered in the five communities within Deerfield and Highland Park High School District 113. CBO identifies high-achieving young people who without support would likely forgo post-secondary education and assists them in applying to and completing college. CBO goals are achieved through a program of one-on-one coaching between volunteers and scholars. Additional aid provided by CBO includes tutoring, training services, laptop computers, and up to $4,000 per year in scholarships. </p> Thanks, Rebecca |
|||||||