www.webdeveloper.com
Results 1 to 12 of 12

Thread: PLS!!!Added Code! IE and Firefox vs Opera problem

  1. #1
    Join Date
    Aug 2006
    Location
    International
    Posts
    70

    PLS!!!Added Code! IE and Firefox vs Opera problem

    Hey guys!
    I have a problem with spaces...
    In IE and firefox, perfect, but in Opera I get a bigger space between <p>.
    And even if I set *{margin:0;padding:0} and than specify for <p> a concrete padding or margin, there is still a difference in the way they are displayed!

    pls hel, cause I spend like couple of hours trying everything I knew...

    For full code pls visit: http://www.jantuan.com/modus

    also I have a problem with z-index on the bottom of the page on: http://www.jantuan.com/modus/about.html

    Pls guys if u have some time, take a look...
    HTML Code:
    <div id="lang">
    	<img src="img/rus.gif" width="22" height="14" border="0"  />
    	<img src="img/eng.gif" width="22" height="14" border="0" />
    </div>
    
    <div id="welcome">
    	<h2><span>About Us</span></h2>
            <p>some text</p>
    	<p>some text</p>			
    	<p>some text</p>
    </div>		
    <div id="news">
    	<h3><span>News</span></h3>
    	<h4><span>01.02.2006</span></h4>
    	<h4><span>15.03.2006</span></h4>
    	<h4><span>13.03.2006</span></h4>
    	<h4><span>25.04.2006</span></h4>
    </div>
    Code:
     #lang {
    	 position:relative;
    	 margin-top:216px;
    	 margin-left:375px;
    	 width:60px;
    	 margin-bottom:0;}
    #lang img {margin-left:5px;}
    	 
    #welcome {
    	 position:relative;
    	 width: 443px;
    	 height: 235px;
    	 margin-top: 26px;
    	 margin-left: 0px;
    	 background: url(../img/news_line.gif) no-repeat bottom left;}
    #welcome p {
    	 font-family: verdana, arial, helvetica, sans-serif;
    	 font-size: 13px;
    	 margin-left: 20px;
    	 width: 415px;
    	 margin-top:0;
    	 padding-top:0px;
    	 padding-bottom:0;}
    #welcome h2 span { display: none;}	 
    
    	
    #news{
    	 position: relative;
    	 margin-top: 6px;
    	 margin-left: 10px;
    	 width: 433px;
    	 height: 99px;}
    It's urgently important to me!!! So pls someone who figures it out where is the problem help me!
    .:: Byte_eater

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by byte_eater
    Hey guys!
    I have a problem with spaces...
    In IE and firefox, perfect, but in Opera I get a bigger space between <p>.
    ....
    Have you created a default line-height for p or your font-family used if declared in "body"?
    Know that all browsers have their own idea of how a font should appear, so you should declare some things on how the font should appear:
    so:
    p {font-family:arial, 'times new roman', serif; line-height:1.0em;}
    might be what you are missing (or in BODY, if that is where/how you style your main font).
    Some other 'optional but page-critical' criteria might include "font-variant:normal; font-weight:normal;" etc. I have not encountered in my work a need for this. I might see some browser-to-browser discrepancy in font appearance, but acceptible differences I just leave alone. Yours sounds as if this is seriously needed.(?)

    "line-height;" tells the browser to create the 'font-family' in 'this height' ("1.0em"). And "one em" for any font is "one em". That is to say "times new roman" in "1.0em" is not the same "height" as "arial" also in "one-em", but for the font-type, the size is(should be) correct. So a "1.0em" for an <h1> is correct for an <h1>, but not the same size as for a paragraph <"p>" when using another font-family.
    What you are describing sounds a bit like a line-height is not being called.
    Last edited by WebJoel; 01-28-2007 at 10:54 AM.
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Aug 2006
    Location
    International
    Posts
    70

    no:(

    It's not that... It changes a little bit how the text is displayed, but there is still difference between <p>, and maybe it's not the difference in <p> which causes the disproportion..... because, in the about.html, there are more <p>, but the difference is still the same as in index.html...

    What should I do? How to finish this project???
    .:: Byte_eater

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by byte_eater
    It's not that... It changes a little bit how the text is displayed, but there is still difference between <p>, and maybe it's not the difference in <p> which causes the disproportion..... because, in the about.html, there are more <p>, but the difference is still the same as in index.html...

    What should I do? How to finish this project???
    that is because the <p> in "about.html" is also an "<a>" (anchor)?. Myself, I'd not use <p> to define links, I'd the semantic <ul> and make them <li>, seperating the <p> from the <a> solves that part.
    -Let me copy your code and take it offline to my OPERA browser so I can see what you have.

    (back)

    Okay, -I have your HTML and CSS offline, -I do see a slight discrepancy with OPERA. It looks to be to do with "font-size:13px;" in BODY. "pixel" font-sizes are a bit tricky and can be 'off', browser-to-browser. Can you give it an "em" size? This would make it -re-sizeable, but it also makes Firefox's view like OPERA... not what you wanted. but it might identify the problem, -pixel size for font. Maybe a "0.8em" for the font-size in "body"? (going to go try that next)...

    (back)

    -Mixed results there.
    I am noting a 'sliced image' here (see attached image). -Could this be sliced off cleaner, so that the "content" DIV doesn't have to actually line-up to the image? Also, -notice how the content font seems crushed together vertically? Here, I am using "0.9em" for the font-size and "1.0em" for the line-height;". I could even go to "1.1em" for the line height and space that vertically a little bit more.
    Attached Images Attached Images
    Last edited by WebJoel; 01-28-2007 at 11:24 AM.
    I build for: Firefox and tweak for IE

  5. #5
    Join Date
    Aug 2006
    Location
    International
    Posts
    70
    ...in about.html there is only one <p> that have inside it an <a>, but it's not connected with "content" div, also replacing it with <ul>, don't solve the problem with the distances...

    ...changing the px to em is also not helping, cause if it was the problem in the "px" the distances will be different in index.html and about.html having more rows of text of different size...

    It could be cleaner, in that sense that I could it make separate, but anyway at the bottom will be present the difference...

    I tried anything...and no changes...
    .:: Byte_eater

  6. #6
    Join Date
    Aug 2006
    Location
    International
    Posts
    70

    I'll try this

    If I cannot change anything with css, i'll change the design...I mean, I'll stick all this flying elements to the container's bg...cause the text is not exceding the limits of it's areas..so hope to work this variant....

    Thanks for help and for your time!
    .:: Byte_eater

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I updated (my offline copy) of the "news" DIV to be an <ul> instead of <p>s (and saved a few bytes as the code is smaller) and this fixed part of the left-edge border issue. -I am now trying now to do the same for "#menu" DIV but just discovered the weakness of the current design: see attached image. -The background is an image, -you are trying to position blocks of text over this, -and if the font-size changes or the font-weight changes or more or less text is added, -everything falls apart.
    This concept *works* (many of my eariler sites used exactly the same methods), but it is not fluid and therefore, prone to display problems upon varying browsers unless things are well-padding to allow for expansion of elements.
    What you need is a 'fluid design' for this, -an expanding container.
    I'll use your current image them and seperate the elements into 'fluidic design elements' that will expand/contract to adjust for content. This won't be too difficult to do because your code is valid as-is, -it is just a matter of moving things around and playing it the various elements. (-It is a pleasure to work with code that is well-written).
    This might take me awhile, -I'll try to have something back here this evening or tomorrow morning.
    Attached Images Attached Images
    Last edited by WebJoel; 01-28-2007 at 12:31 PM.
    I build for: Firefox and tweak for IE

  8. #8
    Join Date
    Aug 2006
    Location
    International
    Posts
    70

    Thanks a lot man!

    Thanks a lot man for your effort!

    In the news div...you're right, it's easier and more "standard" to use <ul> instead of <p>, I overlooked that section....and finnally it solved the question...

    but what to do with the "about.html"? There are no <p> with <a> in the content div? why it's so?

    As for menu, it's not so flexible I agree totally!

    Thanks once again! waiting to see your solution!
    And thanks for commenting my code Good Luck!
    .:: Byte_eater

  9. #9
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I have made some nice progress with this, -it looks nearly indentical to what you have, but now it is expandable without 'borders' becoming 'mis-aligned'.
    You could add additional list-items, links or more content, and the design increases flawlessy in height.
    I have no validation errors right now, -but I am having problems with the 'outer wrapper' not expanding in Firefox. Before I post my work so far, I'd like to have another go at it in the morning to try to correct this. I imagine that this is the 'faux columns' thing again. *sigh*... that is annoying. That it is so difficult to get "height:100%;" to work correctly cross-browser...
    I build for: Firefox and tweak for IE

  10. #10
    Join Date
    Aug 2006
    Location
    International
    Posts
    70
    Thanks man!

    Hey, what do you think of the layout design? what could be imporved?
    Give me a link to some of your works...it'll be interesting for me to check them

    p.s.: If u want u can give me what u worked till now, and to fight both on the height problem...?

    Good luck!
    .:: Byte_eater

  11. #11
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I'm still adding things to this, -but think that I am ready to ask for help. -I can't seem to get the burgundy background underneith "brief_contact" to go all the way to the bottom of the container in Firefox. This looks good in IE (of course), and I am sure that the error is mine. A quick view in Fx shows what I mean. I currently show no errors/warnings.
    This 'wrapper' isn't 'expanding vertically' to contain the floated DIVs. Maybe someone can check this over and suggest a remedy..
    To make this work, I have download and referanced the images to a folder "images", so I'll attach a ZIP'd file of what I have.
    Attached Files Attached Files
    I build for: Firefox and tweak for IE

  12. #12
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by byte_eater
    ...Hey, what do you think of the layout design? what could be improved?
    Give me a link to some of your works...it'll be interesting for me to check them
    p.s.: If u want u can give me what u worked till now, and to fight both on the height problem...?
    I like what you have so far. I would call it a 'clean design'. It would fit very nicely into a 800X600 resolution, as well as 1024x768.
    I can't really suggest 'what I would change', although I did change some things out of skill level (used 'fake dropshadow' which is merely a fat border) and time contraint (make it work first, -make it prettier later), and instead of using a 'dark line image' with text on it for section dividers, -I'd use a thick border-bottom and absolute-position actual text over it. -Give the spiders/web 'bot something to read, fewer http-calls for new images.
    Link to some of my works? -Don't judge my ability and skillset based soley upon these works... -there is a bit of legacy-build in there. Some of those are 4 or 5 years old, or older. That is why I don't offer them for review in 'website reviews'... I'd be scolded for some of the old/deprecated code, and sites 'online but not completed' which is a serious business mistake. ('if it is not ready, it is not online')
    Just click my username and read my stats. There is a link to my portfolio. (I have other works which should be included, but are not included).
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles