|
HTML - Browser Font Size And Paragraph Breaks
I am in the process of re-designing my website.
old site www.ghilliesuitsource.com new site still a work in progress www.ghilliesuitsource.com/gss_test I am struggling with 2 things on my new site. 1) The parallelogram (tilted rectangle) images in the background are seperated by paragraph breaks so that I can alternate between left and right aligned. While all of the forground "stuff" text and product images are AP DIV elements so they hold their spacing. Page looks like I intend it to in IE but netscape/firefox appear to use a different paragraph break line size causing the forground "stuff" to appear lower and lower with respect to the parallelograms, and it gets worse the further down the page you go. 2) It appears as though IE will not change text size inside an AP DIV element when you go to "view-Text Size" This is good because I am using a graphic to act as a border around text. Netscape and Firefox do change font sizes in AP DIV elements so when you select a larger fontsize the text "spills" out of the border. If you can help me out with either of these problems I would certainly appreciate it. Similar TutorialsHello Everyone I need help with this I know it is something easy but I cant get it to do what I want Im trying a Nudge For my heading and I would like it in the center and bigger and I cant get it to work for my other title of the screen look HTML Code: <!-- START OF SCRIPT -->
<html>
<head>
<title></title>
<script language="JavaScript1.2" type="text/javascript">
/*
Nudging text by Matthias (info@freejavascripts.f2s.com)
Modified by Dynamic Drive to function in NS6
For this script and more, visit [url]http://www.dynamicdrive.com[/url]
*/
//configure message
message="Fabric Shipping Rates!"
//animate text in NS6? (0 will turn it off)
ns6switch=1
var ns6=document.getElementById&&!document.all
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt="";
function jump0(){
if (ns6&&!ns6switch){
jump.innerHTML=message
return
}
if(message.length > 6){
for(i=0; i != message.length;i++){
txt=txt+"<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"<\/span>"};
jump.innerHTML=txt;
txt="";
jump1a()
}
else{
alert("Your message is to short")
}
}
function jump1a(){
nfinal=(document.getElementById)? document.getElementById("n0") : document.all.n0
nfinal.style.left=-num2;
if(num2 != 9){
num2=num2+3;
setTimeout("jump1a()",50)
}
else{
jump1b()
}
}
function jump1b(){
nfinal.style.left=-num2;
if(num2 != 0){num2=num2-3;
setTimeout("jump1b()",50)
}
else{
jump2()
}
}
function jump2(){
txt="";
for(i=0;i != message.length;i++){
if(i+num > -1 && i+num < 7){
txt=txt+"<span style='position:relative;top:"+mes[i+num]+"'>"+message.charAt(i)+"<\/span>"
}
else{txt=txt+"<span>"+message.charAt(i)+"<\/span>"}
}
jump.innerHTML=txt;
txt="";
if(num != (-message.length)){
num--;
setTimeout("jump2()",50)}
else{num=0;
setTimeout("jump0()",50)}}
</script>
<meta content="Evrsoft First Page" name="GENERATOR">
</head>
<body>
<div id="jumpx" style="COLOR: blue"></div><script type="text/javascript">
if (document.all||document.getElementById){
jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx
jump0()
}
else
document.write(message)
</script><!-- END OF SCRIPT -->
<p align="center"> </p>
<p align="center">8 yards of cotton fabric in a flat rate envelope $4.25 (domestic) $9.50 (Int'l) & $7.50 (Canada) - FLANNEL would be approx 4 yds. </p>
<p align="center">Flat Rate Box for $8.25 (domestic only) which I can fit up to 18 yds regular cotton OR 10 yds of flannel.</p>
<p align="center"><font size="5"><strong><u>Every thing Else in our store Shipping Rates</u></strong></font></p>
<table bordercolor="#666666" cellspacing="0" cellpadding="2" width="400" align="center" border="1">
<tbody>
<tr>
<td width="50%" bgcolor="#336633">
<center>
<font color="#FFFFFF"><strong>Total Purchase Amount</strong></font>
</center>
</td>
<td width="50%" bgcolor="#336633">
<center>
<font color="#FFFFFF"><strong>Shipping Cost</strong></font>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 0 to 4.99</b>
</center>
</td>
<td>
<center>
FREE
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 5 to 9.99</b>
</center>
</td>
<td>
<center>
$6.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 10 to 39.99</b>
</center>
</td>
<td>
<center>
$7.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 40 to 59.99</b>
</center>
</td>
<td>
<center>
$8.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 60 to 79.99</b>
</center>
</td>
<td>
<center>
$9.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 80 to 109.99</b>
</center>
</td>
<td>
<center>
$11.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 110 to 119.99</b>
</center>
</td>
<td>
<center>
$12.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 120 to 169.99</b>
</center>
</td>
<td>
<center>
$14.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 170 to 229.99</b>
</center>
</td>
<td>
<center>
$16.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>230 to 269.99 </b>
</center>
</td>
<td>
<center>
$19.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>270 to 299.99</b>
</center>
</td>
<td>
<center>
$20.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>300 to 399.99</b>
</center>
</td>
<td>
<center>
$24.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>400 to 499.99</b>
</center>
</td>
<td>
<center>
$26.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>500 to 599.99</b>
</center>
</td>
<td>
<center>
$28.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b> 600 to 699.99</b>
</center>
</td>
<td>
<center>
$29.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>700 to 899.99</b>
</center>
</td>
<td>
<center>
$30.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>900 to 999.95</b>
</center>
</td>
<td>
<center>
$34.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>1000 to 1499.99</b>
</center>
</td>
<td>
<center>
$36.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>1500 to 1999.99</b>
</center>
</td>
<td>
<center>
$37.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>2000 to 2499.99</b>
</center>
</td>
<td>
<center>
$39.95
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>$2500 to 2999.99</b>
</center>
</td>
<td>
<center>
$41.95
</center>
</td>
</tr>
</tbody>
</table>
</body>
</html>
If you can Please help me How can I remove the font size Hello, I am have a small problem with text color. When I make the size smaller the color of it changes to a light grey instead of black. You can see it in the comments box... http://www.mesquitechristmas.com/loc...?id=2#comments Here is the CSS for the text I am using Code: .commentsDetails {
color: #000000;
font-weight: normal;
font-size-adjust: 0.40;
font-family: Tahoma, Verdana, Arial, Georgia, sans-serif;
}
Any idea why this is happening and how to fix it? -Thanks If you can, look at my blog in both Firefox and IE. http://muttonpizza.com I work in Firefox so that is what I want it to look like. But in IE the captions under the pictures are 1/3 the size and in the "About This Blog" box the text is at least twice as big and looks like a different font. Any ideas what's going on. I can post the code if needed. I have taken over a website that has font size option. and now that i added some text, the text will not change when i use the font size option buttons on the left. anyone have any thoughts? http://www.aacwinnip...enda_Sklar.html I have this html page, you may see in the attachment. The body font-size is currently at 70%, this creates indentations for the lines below first line. If I change body font-size to 80%, the indentation is gone. Why is there such indentation if font-size is less than 80%? Thanks. I am running on firefox. I recently updated my homepage to include more text, and moved some of the image buttons around. I noticed however, that if I view the site and increase the size of the font (control+mouse wheel) it also increases the amount of spacing between the buttons, enough to move one of the images to the next row. Is there any way to stop these images from moving? The site is he http://www.bacchanalpromotions.com The current code is written like this, I think the margin tags are what gets increased when the font size goes up, but I don't know for sure... I tested on Firefox 3.6, at 1400x900 resolution. Code: <a href="booking.php?page=thss"><img height="100px" width="123px" src="performers_images/home-circus.png" onmouseover="this.src='performers_images/home-circus2.png'" onmouseout="this.src='performers_images/home-circus.png'" alt="" /></a> <a style="margin-left:13px" href="booking.php?page=fire"><img height="100px" width="123px" src="performers_images/home-fire.png" onmouseover="this.src='performers_images/home-fire2.png'" onmouseout="this.src='performers_images/home-fire.png'" alt="" /></a> <a style="margin-left:13px" href="booking.php?page=sideshow"><img height="100px" width="123px" src="performers_images/home-sideshow.png" onmouseover="this.src='performers_images/home-sideshow2.png'" onmouseout="this.src='performers_images/home-sideshow.png'"alt="" /></a> <a style="margin-left:13px" href="booking.php?page=stilts"><img height="100px" width="123px" src="performers_images/home-stilts.png" onmouseover="this.src='performers_images/home-stilts2.png'" onmouseout="this.src='performers_images/home-stilts.png'" alt="" /></a> Hi guys, I have two problems with my site http://www.djash.com Both problems have to do with charts section. 1. The font size for the charts shows bigger in firefox and chrome - it shows correctly on IE as intended. 2. I need to decrease the gap between the "Mainstream House" Charts and the "RnB" charts but I haven't been able to find a way to do it. thanks a lot in advance for anyone who can help with these 2 issues Andreas Hi Guys, I wanted to large bold text (around 30px) in a field when typed in. Is this possible with HTML? My code is below. Thanks, Colin85 HTML Code: <form method="post" action="sendmail.php"> <div style="position:absolute; bottom:285px; left:250px;"> <input name="email" type="text"><br /> </div> <br /> <div style="position:absolute; bottom:174px; left:250px; "> <textarea name="message" rows="1" cols="40"> </textarea><br /> </div> <div style="position:absolute; top:569px; left:274px;"> <INPUT TYPE="image" SRC="http:/example.jpg" left= "200" BORDER="0" ALT="Submit Form"> </div> </form> </div> </div> Hello. =) I'm trying to make font "shrink" or "grow" based on the browser's width/height...but so far, I'm having problems. I made this page as an example. If you manually resize your browser (ie: drag the sides of it and make it become smaller and smaller), you'll see that the picture maintains the same proportions, and the text stays in the same place. ...But the text doesn't "shrink" for some reason. If your browser is "small", I want the picture AND the text to get small too. For example, if the page is REALLY big, then the font should be size 18, and if it's really small, then the font would be size 1 or something. =\ Does anyone know how I can do this? Would I need to use the "Zoom" property? (I just recently heard about this property, so I don't know too much about it. But if I do need to use "zoom", please tell me: will it work in Firefox and other non-IE browsers?) Thanks in advance!! What's an easier (shorter) way to combine these elements? Code: <font face="verdana"><font size="3"><font color=#000000;"> thanks Hi all, I'm not sure if I'm posting in the right place but I have an issue with Internet Explorer 7. Apparently, when user's are looking at my website (it's internal) with IE 7 - the size of the font shrinks to 2 (or even lower). the site looks ok on fireFox/older version on IE. can anyone advise how to fix it? THANK YOU! hello people, I checked the other day how is easy to have a slider with html5 and how great looks, but I was wondering how can I use it to control the font size or color of the font or background. I use already the font size option for the user to my blog's posts but with javascript and by clicking on two images (plus, minus). A simple slider would be perfect but I cant find on internet how can I get the values from slider and feed the size or color. I only found one tutorial on html5 slider which just prints the number on the slider. I am not an excerpt so any help will be much appreciated. cheers Hello I am a total newbie to html and I am sure this can probably be answered in a second.... I am trying to make my title text very large to make a statement - maybe 5 cm high. It doesnt seem to matter how big i make it in my nvu editor, ( in the normal screen mode) once i upload it to my webspace online it only appears at a much smaller size. I can make it so the title literally fills the screen in my nvu editor and then upload it to my webpage and it still restricts the maximum size it shows it at. Does it sound like i am doing something wrong in my nvu html editor or should i be using some html text in the source mode to make the large text recognisable to my webspace, ie: using some font size comands? I hope this makes sense. Any help would be greatly appreciated Thanks Alex Hello All, I am increasing the font size of the text using javascript. In IE, the div size increases or text get automatically wrapped when font size increased. But in firefox browser, the div size remain same and text flows out of the div. Anybody having any idea to correct his behavior in firefox? Please help. First Post! Yeah now thats out of the way... I've just designed a Linux Tutorial site for a friend who is a Linux fanatic. However, I've used Arial as the font. When the site is viewed in Linux (I think its the Mozilla browser) it appears in this odd font. I was wondering if anyone knows which fonts Linux broswers display best - so I can assign it to the 2nd choice in the CSS. Arial being number1 for Windows browsers, then going to the 2nd choice if its Linux and it cant find the Windows font. Any help whatsoever would be appreciated. Thanks! Hi Guys, When the site is loaded in Internet Explorer when the window is not maximised upon maximising the window certain elements are no longer in the correct place, its like they stay where they loaded. I can only think that it would have something to do with the CSS Background Positioning on some div's. Any incite to what might be wrong would be appreciated. Cheers -Matt Similar to how most pop-up windows are a fixed size, I was curious as to how I could fix the size of a browsing window (particularly the width) of a page. Vertical scrolling isn't as important, but I would like my index page as well as the pages within the Iframe in the index page to remain a certain width so viewers would only have to scroll vertically to view the entire content of the html document. I have tried "stealing" the coding used in pop-up windows, trying it in both the head and body of the code but to no avail. I have searched for countless hours on the 'net looking for a tutorial that gives the code for this and have had zero luck. (I know it must be possible.) Any and all help/input is greatly appreciated! Thanks so much in advance, Dereck So I know if you use "%" to define your height and width with tables that it allows you the table to resize based upon a users browser size. My question is how can you do this with images? I tried setting my height and width for my image using "%" but then my image just becomes overly stretched. My professor said that I should create a table and than place the image within the table, and then set the table height and width using "%". The code below is what I tried. It didn't work though. Any ideas on how to do this? Code: <body>
<table width="100%" height="100%" border="0">
<tr>
<td height="100%" width="100%"><p align="center"><img src="images/Banner.png" align="center" class="source-image" /></p></td>
</tr>
</table>
</body>
Thank you for your help! |
|||||||