...

View Full Version : Resolved Article Post Help.



CHEWX
05-12-2011, 01:03 PM
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.

Kor
05-12-2011, 01:30 PM
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.

CHEWX
05-12-2011, 01:33 PM
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.

Kor
05-12-2011, 01:53 PM
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?

CHEWX
05-12-2011, 01:55 PM
I'll SS.

CHEWX
05-12-2011, 01:59 PM
Okay, here's safari zoomed in, it breaks the image apart. Looks fine normally.

http://chewx.co.uk/NTU/claim/safari_zoom.jpg

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

http://chewx.co.uk/NTU/claim/FF4_normal.jpg

Kor
05-12-2011, 02:23 PM
Testing with browsers' Zoom is tricky. In fact, who's gonna zoom your site? And why?

CHEWX
05-12-2011, 02:29 PM
I know, but the problem still stands.

It's like it on Windows platform in FF3.

CHEWX
05-13-2011, 11:43 AM
A coding forum and no one knows how to create a simple div article ?

Kor
05-13-2011, 01:39 PM
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.

CHEWX
05-13-2011, 03:50 PM
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 ?

Kor
05-13-2011, 03:59 PM
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)

CHEWX
05-13-2011, 04:32 PM
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.

CHEWX
05-13-2011, 05:37 PM
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.

raptorjgzus
05-13-2011, 09:35 PM
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.



.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.

CHEWX
05-13-2011, 10:02 PM
Right, I've gone down the trial and error route as I was adamant my coding was correct.

I have been coding this in HTML5 tags. And using a HTML5 doctype, it was all valid bar he facebook feed as that's just the code I got from dev.facebook.

I can't set the height of the img's, only width because they are drawn in from wordpress, so not all the same size img's.

ANYWAY, I know about the white space, BUT after two hours of ****ing about I've swapped..


<!doctype html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />


with


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


..and it all works bang on.

Now this has seriously confused me, can anyone tell me why ?

AndrewGSW
05-14-2011, 12:10 AM
In your HTML(5) code you omitted the <html> tag:

<!doctype html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Should be:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
(the meta tags are also shortened in HTML5, although the longer version works as well.)

CHEWX
05-14-2011, 12:18 AM
SO by this it would break content randomly ?

AndrewGSW
05-14-2011, 10:04 AM
In theory it shouldn't show anything at all ;) as the <html> tag contains the entire content of the page.

CHEWX
05-14-2011, 10:28 AM
Lol.

Bloody coding does confuse me sometimes.

Anyway, thread resolved.

Thanks for all the help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum