• 0

[HTML] Positioning image only works in firefox.


Question

21 answers to this question

Recommended Posts

  • 0

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.vulkop.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Bunch of errors. According to their HTML tidy (auto fixer) it should be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Project Vulkaan</title>
<link href="login.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link rel="SHORTCUT ICON" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/volcano.png" />
<style type="text/css">
/*<![CDATA[*/
 div.c4 {text-align: center}
 div.c3 {position:relative;margin-left:200px;margin-top:70px; width:450px;}
 img.c2 {margin-left:-500px;margin-top:-50px;position: absolute;}
 img.c1 {margin-top:-30px;}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<div id="topnav" class="topnav">test</div>
<a href="http%3C?%20echo%20HTTPS;%20?%3E://%3C?%20echo%20DOMAIN;%20?%3E"><img src="logo.png" align="left" class="c1" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></div>
<div class="hr">
<hr /></div>
<div id="maincontainer"><br />
<br />
<div class="c4"><img src="images/about.jpg" class="c2" alt="** PLEASE DESCRIBE THIS IMAGE **" />
<div class="c3">test. why wont the image work :(                        </div>
</div>
</div>
<?}?>
</body>
</html>

I don't know how good the quality of the above code is (not a HTML developer) but hey give it a shot lol.

Link to comment
Share on other sites

  • 0

For as simple as this is, I don't see why you need to absolute position the image.

Just give the image a class called .left and toss the following:

 #container {
   margin: 0 auto 20px auto; 
   }
 #maincontainer {
    width: 960px;
    margin: 0 auto;
    text-align: center;
  }
 .left {
    float: left;
  }
 .right {
   float: right;
 }
 .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
 }

 <div id="maincontainer" class="clearfix">
      <img src="images/about.jpg" class="left">
      <p class="right">test. why wont the image work :(</p>
</div>

Also, as you can see I removed some of your bloated code. You don't need random linebreaks when you can apply styles to anything. It's also best to not use in-line styles especially since you're using a stylesheet.

Edit: You can also see a working example I did for another user: http://dev.icupcake.org/neowin/skill.html

Link to comment
Share on other sites

  • 0

For as simple as this is, I don't see why you need to absolute position the image.

Just give the image a class called .left and toss the following:

 #container {
 margin: 0 auto 20px auto; 
 }
 #maincontainer {
 width: 960px;
 margin: 0 auto;
 text-align: center;
 }
 .left {
 float: left;
 }
 .right {
 float: right;
 }
 .clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
 }

 <div id="maincontainer" class="clearfix">
 <img src="images/about.jpg" class="left">
 <p class="right">test. why wont the image work :(</p>
</div>

Also, as you can see I removed some of your bloated code. You don't need random linebreaks when you can apply styles to anything. It's also best to not use in-line styles especially since you're using a stylesheet.

Edit: You can also see a working example I did for another user: http://dev.icupcake....owin/skill.html

Didn't work :( check it out now :(

Link to comment
Share on other sites

  • 0

Well, obviously it won't work. You can't just give a div a class if there's nothing to the stylesheet for it.

You need to add the CSS I gave you and then adjust to your requirements.

Link to comment
Share on other sites

  • 0

Actually, it is working its just your code is so bloated and messy that it's incorrect. If you remove your unncessary divs, removed ALL of the absolute position crap, then you'd be fine.

I'm in MW2 right now else I'd just do it for you to show you.

Like I said, you can reference the working example I gave in the URL. Start as that for your base then add extra code that you need. Basically, scrap what you have.

Link to comment
Share on other sites

  • 0

Actually, it is working its just your code is so bloated and messy that it's incorrect. If you remove your unncessary divs, removed ALL of the absolute position crap, then you'd be fine.

I'm in MW2 right now else I'd just do it for you to show you.

Like I said, you can reference the working example I gave in the URL. Start as that for your base then add extra code that you need. Basically, scrap what you have.

Alrighty :shiftyninja:

post-271966-12883382902127.png

Link to comment
Share on other sites

  • 0

When I said it's working, I meant ~my~ code--not yours. ;)

^_^

http://dev.icupcake.org/neowin/snowl.html

<html>
<head>
<title>Snowl</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
img {
	border: 0;
}
div {
	border: 1px solid #FF0000;
}
body {
	color: #333;
	background: rgb(255,255,255);
	font-family: arial, verdana, tahoma, sans-serif;
	font-size: 100%;
	line-height: 1.7em;
}
#container {
	width: 100%;
	background: #000;
	margin: 0 0 20px 0;
}
.wrap {
	width: 960px;
	margin: 0 auto;
}
	.left {
		float: left;
	}
	.right {
		float: right;
	}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
 }
</style>
</head>
<body>
<div id="container">
	<div class="wrap clearfix">
		<div id="topnav" class="topnav"> </div>
		<a href="#"><img src="https://www.vulkop.com/logo.png" alt="" class="left" /></a>
	</div>
</div>

<div class="wrap clearfix">
	<img src="https://www.vulkop.com/images/about.jpg" alt="" class="left">
    <p class="right">test. why wont the image work :(</p>
</div>
</body>
</html>

You can work off of that base. I added border: 1px solid #FF0000; so you can see what DIVs are where.

Link to comment
Share on other sites

  • 0

Sidenote - I used to do the whole image replacement with h1 but this is a good read to get you to stop: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/

Also, not sure if it was intentional or accidental but with your example, there is no text link for the heading if CSS is disabled. You didn't include any text. I'm guessing it was intentional since I didn't see text-indent: -9999px; applied to #header h1 a, #header h1 a:visited.

Link to comment
Share on other sites

  • 0

Interesting article. Thanks.

Sidenote - I used to do the whole image replacement with h1 but this is a good read to get you to stop: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/

Also, not sure if it was intentional or accidental but with your example, there is no text link for the heading if CSS is disabled. You didn't include any text. I'm guessing it was intentional since I didn't see text-indent: -9999px; applied to #header h1 a, #header h1 a:visited.

Link to comment
Share on other sites

  • 0

Sidenote - I used to do the whole image replacement with h1 but this is a good read to get you to stop: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/

...

It's an ok article, although it doesn't take the HTML5 rules into account.

Given this bit of nonsensical markup, which header is the top level header?

<h3>A h3 Header</h3>
<section>
    <h2>A h2 Header</h2>
    <section>
        <h4>A h4 Header</h4>
    </section>
</section>
<section>
    <h1>A h1 Header</h1>
</section>

It's the <h3> article, it's child headers are the <h2> and then the <h1>, and the <h4> is a direct child of the <h2>. Basically, the number means nothing, it's the level in the document that gives it the meaning.

That being said, including an <img> and <h*> tag within an <hgroup> would solve any issues (they're then considered one entity by the semantic rules)

Link to comment
Share on other sites

  • 0

I'm not sure why your example would have out-of-order headings? HTML5 didn't make any changes to the hierarchy of headings. H1 is still the most important heading in HTML5. So yeah, the number DOES still mean something. Not sure where you read/though otherwise.

http://diveintohtml5.org/semantics.html#header-element

http://html5doctor.com/the-header-element/

http://boblet.tumblr.com/post/134276674/html5-structure2

http://mindgarden.de/hgroup-and-headings

http://www.iheni.com/html-5-to-the-h1-debate-rescue/

https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document

Link to comment
Share on other sites

  • 0

From the HTML5 outlining algorithm, the MDC page linked even mentions it.

...

The heading elements have a rank given by the number in the element name, where <h1> has the highest rank, and <h6> has the lowest rank. Relative ranking matters only within a section; the structure of the sections determines the outline, not the heading rank of the sections.

...

So an <h1> means more than an <h2>, only as long as it's in the same section level. If they're at different levels (e.g. an <h3> higher than an <h1>), then the <h3> is a higher level header.

Link to comment
Share on other sites

  • 0
"Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.

Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content."

http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html

To me it's not so much as that you CAN do it but rather just what is more clear. Quoted posted goes over an example similar to yours as well. That's really just the point I'm trying to get across :).

It's that SEO part of me that's compelled to reorganize it.

Link to comment
Share on other sites

  • 0

So really it's just a nicer (backwards compatible) way to implement the <h> tag from XHTML2.

I suppose I was really taking issue with the fact that the original article treated the <h1> tag as some type of perfect header tag that shouldn't be wasted on a logo (when in reality it's just a header, and if the logo forms part of your header you may as well use it)

That being said, I prefer the <img src="" alt="text here" /> rather than doing text replacement via CSS.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.