SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Kent - UK
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need a lot of help!

    Hi - I am extremely new to web design. Not my profession (I am a community projects advisor), but having Dreamweaver 8 on my computer I stupidly told two groups I am working with that I would develop web sites for them. The groups are two Forums one for Senior Citizens and one for people with disabilities so accessibility is a big issue in the design.

    Now - being a complete novice - I have used a starter page from within Dreamweaver and altered the CSS file to the colour wanted and increased text sizes etc. What I have found however, is that when viewed in IE6 the text size doesn't automatically increase when altering the browser settings. I have tried changing the CSS to ems and to percent but it still doesn't work properly.

    So - I have created a duplicate CSS file with increased text size and would like to have a button on each page that the user can press if they want larger text but I can't work out how to do this. I have tried every way I can think of but am probably doing something really stupid.

    As I said - I am a complete novice - trying to teach myself - so if anyone can give me some help here could you explain in terms a 2 year old would understand

    Thanks

    Ann

  2. #2
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    when you say "I have tried changing the CSS to ems and to percent but it still doesn't work properly" are you sure you've changed the font size of the particular text that's fixed in size on ie6 to ems or percent? i'm pretty sure that'll be the solution (making sure the font size is using the percent or em measurement rather than pixels measurement) to getting the text to change size when the user resizes in ie6.

    not sure if a button to switch to large would really be necessary having got the text to change size in all/most browsers as it should?

  3. #3
    SitePoint Evangelist croatiankid's Avatar
    Join Date
    Mar 2007
    Location
    Zagreb, Croatia
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with johnyboy. Also, we could probably be of more help if we could see your html and css.
    Hrvoje Markovic
    Croatiankid designs

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Kent - UK
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK - Thanks - do you just want me to copy and paste all code here?
    I have tried putting body text in ems and percent but it doesn't make any difference - just doesn't move when I resize the text in the browser. So much for using a Dreamweaver template. I am beginning to think it would have been easier if I had started from scratch.

    PS I told you I was a bit clueless about all of this!

  5. #5
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    is the text which isn't changing size in ie6 directly in the body or is it contained in some further html element(s)?.. eg:

    ...
    </head>
    <body>
    <p>Text which isn't changing size in IE6</p>
    ....

    that text is contained in p tags, which in turn is contained in the body tags. in the style, p is likely to have a pixel based font size setting on it. if so, the setting on the p tag trumps, as it were, the setting on body, so your css setting on body is being over ridden by the setting on p. -- that's just an example of the kind of thing i guess is happening. so just to carry on with that example say some of the css looks like this:

    body { font-size:1.2em; }
    p { font-size:15px }

    with the above html and css bits of example, the text in the p tags gets sized by a pixel based measure not an em.

    post some of your html: say, from the opening body tag to the first bit of text which isn't resizing as it should.

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    Devon UK
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To be honest Ann. Creating a compliant, accessible site from scratch in a WYSIWYG editor is beyond many professional webdesigners.
    Fortunately there are many blog / cms systems these days where you can just concentrate on the content and choose a template to give you the design.
    I'd recommend you throw away dreamweaver and just use and instant system. Many are free or have free versions that only contain link back to show how they've been made.

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Kent - UK
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnyboy View Post
    ispost some of your html: say, from the opening body tag to the first bit of text which isn't resizing as it should.
    OK - below my code:
    ..................................................................
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Thanet Senior Citizens Forum - Home Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="mystyle1.css" type="text/css" />
    </head>
    <body bgcolor="#FFFFFF">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="15" nowrap="nowrap"><img src="my_spacer.gif" alt="" width="15" height="1" border="0" /></td>
    <td height="60" colspan="3" class="logo" nowrap="nowrap"><img src="images/banner.jpg" alt="TSCF Banner" width="700" height="100" /></td>
    <td width="40">&nbsp;</td>
    <td width="100%">&nbsp;</td>
    </tr>

    <tr bgcolor="#ffffff">
    <td colspan="6"><img src="my_spacer.gif" alt="" width="1" height="1" border="0" /></td>
    </tr>

    <tr bgcolor="#a4c2c2">
    <td width="15" nowrap="nowrap" bgcolor="#FFFFCC">&nbsp;</td>
    <td height="36" colspan="3" bgcolor="#FFFFCC" class="navText" id="navigation"><a href="aboutus.html">ABOUT US </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="javascript:;">INFORMATION</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="news.html">NEWS</a>&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp; <a href="javascript:;">MEMBERSHIP</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="javascript:;">CONTACT</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="javascript:;">LINKS</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td width="40" bgcolor="#FFFFCC">&nbsp;</td>
    <td width="100%" bgcolor="#FFFFCC">&nbsp;</td>
    </tr>

    <tr bgcolor="#ffffff">
    <td colspan="6"><img src="my_spacer.gif" alt="" width="1" height="1" border="0" /></td>
    </tr>

    <tr bgcolor="#ffffff">
    <td width="230" colspan="2" valign="top" bgcolor="#FFFFCC"><table border="0" cellspacing="0" cellpadding="0" width="230">
    <tr>
    <td width="15">&nbsp;</td>
    <td width="200" class="sidebarText" id="padding">Quis est, quod ibi homo vult dolere luctuosa et tragica, quae tamen pati ipse nollet.<br />
    &nbsp;<br /> </td>
    <td width="15">&nbsp;</td>
    </tr>
    </table> </td>
    <td width="50" valign="top"><img src="my_spacer.gif" alt="" width="50" height="1" border="0" /></td>
    <td width="440" valign="top"><br />
    <br />
    <table border="0" cellspacing="0" cellpadding="0" width="440">
    <tr>
    <td class="pageName"><p>Welcome Message Here (Home Page) </p></td>
    </tr>

    <tr>
    <td class="bodyText">
    ........................................................................................

    Thanks for all your help!!!!

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Kent - UK
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah Ha!!!! I have found out what was wrong!!!! The text size in the td tag of my css was over riding the bodytext tag. I have set them both to ems and now it changes.

    Another problem now though. The change is huge! I have td set to 0.8 ems and bodytext set to 1 ems which seems to give me a happy medium but as I said - the jump in text size in IE6 from Medium to Large is a very big jump.

    Any advise - I haven't a clue how ems compare to pixels in sizing.

    Thanks again - and again

    Ann

  9. #9
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,237
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)

    resizing text

    Seeing all the table tags makes me think the problem may have something to do with them, but I'll be the first to admit I'm prejudiced against using them for layout.
    Anyway, it may help to see mystyle1.css too.

  10. #10
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    blimey dreamweaver certainly adds a lot of stuff in there. there's two bits of actual text in there so i assume it's both or one of those which aren't resizing:

    Quis est, quod ibi homo vult dolere luctuosa et tragica, quae tamen pati ipse nollet.

    and

    Welcome Message Here (Home Page)

    as i said above, having set percent or em on body is likely to be overidden by other settings inbetween body and what you're concerned with -- there's a hierarchy to html:
    Code:
    <body...
    	<table...
    		...
    		<tr ...
    			<td ...
    				<table ...
    					<tr>
    						...
    						<td ...
    							Quis est, quod ibi homo vult dolere luctuosa et tragica, quae tamen pati ipse nollet.
    						...
    						...
    each indentation level there is in that above code indicates a further containment. the td tags which "Quis est, quod..." is in, is in tr tags, which are in a table tags, which are in td tags, which are in tr tags, which are in table tags, which are, finally, in body tags. all those tr and td and table tags are inbetween the text you want to effect and the body tags you've put a setting on.

    anyway, basically look for pixel setting in the css on any of the following (so far as that latin bit of text goes):

    #padding
    .sidebarText
    td
    tr
    table

    if there's this say in the css: #padding { font-size:15px; } that will over ride your body em font size setting.

    i'm not saying this is the best sollution at all but this should get you a tangible result (one that shows the latin text changing size in ie6):

    put font-size:1em; into the padding id.

    in the css something like:

    Code:
    #padding {
        font-size:1em;
        ...
    either that or in dreamweaver add a font size em based size to the padding id -- however you do that in dreamweaver.

    probably (definitely) not a good end solution but something that might get the text to change size when resized in ie6 now.

  11. #11
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AnnC View Post
    Another problem now though. The change is huge! I have td set to 0.8 ems and bodytext set to 1 ems which seems to give me a happy medium but as I said - the jump in text size in IE6 from Medium to Large is a very big jump.

    Any advise - I haven't a clue how ems compare to pixels in sizing.
    no expert on it myself but i think 1em amounts to the same -- like 100%. and 1.1em is like 110%, .8em = 80%.

    there's so many tags in tags -- if you've put an em setting on td and on body tags then i think they accumulate. i have no idea if this will help or work but try setting all the font sizes you've changed so far (body and td i think) all to font-size:100%. don't know if that's really going to help or not. i've possibly found ems to be more irreatic in the way you describe than percent (but i'm not sure about that) and also setting them to a 100% will avoid a 150% of 150% kind of situations -- accumalative enlarging.

    one problem is the html which dreamweaver has produced is really convoluted (things in things in things... ) which doesn't help you as a beginner, nor anyone else trying to help, as from a putting html and css together by hand point of view (and from an acccessability point of view as well) all those things in things is the last thing you need -- you wouldn't do it like that if putting it together manually, so, probably, if you want to stick with dreamweaver wait for someone who knows about dreamweaver to come along and make a suggestion (there probably is a fairly easy quick fix in dw for this), or post your question on a dreamweaver related forum (which may not exist on site point). or learn html without dreamweaver -- it's not that hard, although css is tricky at best imo -- but perfectly learnable.

  12. #12
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,237
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)

    inherited sizes

    Yes, ems are based on the containing element. So when you have deep/many nested elemernts the end result of the inner-most could be huge.
    For example, if things were nested as follows:
    body { font-size: 1em;}
    table { font-size: 1.5em;}
    td { font-size: 1.5em;}
    span { font-size: 1.5em;}
    If small was 4px the span text would be 13.5px, if medium was 8px the span text would be 27px, and if large were 12px the span text would be 40.5px
    Similarly, ems less than 1 could get extremely small.
    Be careful tweaking your sizes, as mentioned, you may be better off starting afresh with them.

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Kent - UK
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Thank you everyone - you have all been really helpful!

    I think I have got the text sizing almost as I want it now - using percentages. Dreamweaver is not the most intuitive piece of software and as someone said - I think it could be easier to learn to write script myself rather than rely on software to do it for me - ho hum - a very steep learning curve for me but I am beginning to get a basic understanding - I hope

    I have the Sitepoint book "The CSS Anthology" and I think it is time that I started to read and attempt to understand it

    Thanks again

    Ann


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •