Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Posts
    139
    Thanks
    17
    Thanked 6 Times in 6 Posts

    Article Post Help.

    Hello,

    After my previous thread was locked I'm coming here with a new approach.

    How would you go about coding the bottom image in this post ?

    http://claim.posterous.com/coding

    It's key the title area in the middle is overlapping the image and read me section.

    The way I have done it works, but in some browser it makes gaps between the jagged edge image and the title post. Something to do with minus margins I think.

    Thanks.
    Last edited by CHEWX; 05-14-2011 at 11:28 AM.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by CHEWX View Post
    but in some browser it makes gaps between the jagged edge image and the title post.
    In which browsers? Give us the possibility to limit our guess.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    139
    Thanks
    17
    Thanked 6 Times in 6 Posts
    Sorry, it was in Firefox.

    And also on Chrome and Safari when you zoom in, not that you will zoom in, but it's still annoying.

    http://chewx.co.uk/NTU/claim/index.php

    That is the problem, but I was just seeing if you would code it any differently to how I have.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by CHEWX View Post
    Sorry, it was in Firefox.

    And also on Chrome and Safari when you zoom in, not that you will zoom in, but it's still annoying.

    http://chewx.co.uk/NTU/claim/index.php

    That is the problem, but I was just seeing if you would code it any differently to how I have.
    And the problem is? For me, that document looks the same, at a first glance, in IE9 Chrome 11 and FF4. And what zoom?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Posts
    139
    Thanks
    17
    Thanked 6 Times in 6 Posts
    I'll SS.

  • #6
    Regular Coder
    Join Date
    Dec 2010
    Posts
    139
    Thanks
    17
    Thanked 6 Times in 6 Posts
    Okay, here's safari zoomed in, it breaks the image apart. Looks fine normally.



    And here is normal view in FF4. Slightly differently break apart, brings top image .png down too.


  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Testing with browsers' Zoom is tricky. In fact, who's gonna zoom your site? And why?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    Regular Coder
    Join Date
    Dec 2010
    Posts
    139
    Thanks
    17
    Thanked 6 Times in 6 Posts
    I know, but the problem still stands.

    It's like it on Windows platform in FF3.

  • #9
    Regular Coder
    Join Date
    Dec 2010
    Posts
    139
    Thanks
    17
    Thanked 6 Times in 6 Posts
    A coding forum and no one knows how to create a simple div article ?

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I saw the problem. But the solve means to recreate from the beginning the HTML and, mainly, the CSS. You have there a mixture of position relative and negative margins and top, within much to much superimposed divs. You should simply avoid negative margins, avoid negative left or top positions, and so on. Simply you should work with divs in normal position, and you will get rid of problems.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #11
    Regular Coder
    Join Date
    Dec 2010
    Posts
    139
    Thanks
    17
    Thanked 6 Times in 6 Posts
    I need the top header to overlap the banner slightly though, it's by a round number '10px'.

    Also how does position:relative; effect this ?

    If I'm to avoid negative margins, how do you suggest I do the articles with the jagged edges ?

  • #12
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    To superimpose two divs, give your parent div position:relative and the child div position:absolute. That's the standard way. Don't use negative top/left nor negative margins combined with position:relative and/or absolute. That brings troubles in older browsers (IE especially)
    Last edited by Kor; 05-13-2011 at 05:01 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    CHEWX (05-14-2011)

  • #13
    Regular Coder
    Join Date
    Dec 2010
    Posts
    139
    Thanks
    17
    Thanked 6 Times in 6 Posts
    I really can't work out how to do it then.

    Z-index does not work with position:absolute; so I can't get any overlap.

  • #14
    Regular Coder
    Join Date
    Dec 2010
    Posts
    139
    Thanks
    17
    Thanked 6 Times in 6 Posts
    Right ok, it's obviously not the articles that are screwing things up as I have re-done the code and it works on all the browsers I have on my Mac.

    http://www.chewx.co.uk/NTU/claim/tester.html

    It's something above the articles that are screwing things up..

    EDIT:

    I've commented out everything above the article and it still breaks it.

    Anyone any clues ?

    Works fine on it's own.
    Last edited by CHEWX; 05-13-2011 at 10:04 PM.

  • #15
    New Coder
    Join Date
    May 2011
    Posts
    19
    Thanks
    0
    Thanked 4 Times in 4 Posts
    There is white space between the elements ".image" and ".image img" i believe its due to the "height:inherit". If its not to much trouble maybe try to axe that and set height and width for the images, bye assigning some divs. Or maybe try playing with floats.

    Code:
    .image{
    	height:inherit;
    	z-index:1;
          
    }
    
    .image img{
    	width:300px;
            
    }
    When I went back and started droping the -7px margins you can notice the whitespace. Thats where the problem is coming from.
    Last edited by raptorjgzus; 05-13-2011 at 10:36 PM. Reason: tarded

  • Users who have thanked raptorjgzus for this post:

    CHEWX (05-14-2011)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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