HTML - Inline Style Issues With Xhtml

Hi all,

Sorry if this has been answered already. I've done a search, and couldn't find it.

I'm a copywriter who maintains his own HTML website with Notepad. But I'm very ignorant of CSS use. In other words I know enough HTML to get myself into trouble, but nowhere near enough to get myself out!

I've just realised that the borders around the images on my portfolio page no longer display. I'm sure they used to.

Here's the essence of the code:
<img src="images/image.gif" border="1" style="border: gray">

But they work fine when I remove the style tag. But then they appear black, and I want them gray.

I'm using some font substitution code (SiFR or something like that). Not sure if that's relevant. I've noticed it's caused some strange problems in the past.

Would greatly appreciate it if someone could help.

Cheers.

Hi,

I need to seek some advice from the gurus he -

1) What are the benefits of using the new XHTML 1.0 compared to HTML 4.01 specification? Currently my website is using HTML 4.01 Transitional doctype. Will it affect the current site layout if I change to XHTML 1.0? Does this new format supports the older browsers like Netscape 2 and IE 3.02?

2) As we all know, there are two ways we can implement the CSS on a website. There are Inline CSS and External CSS methods.
Some people claimed the Inline CSS will process faster as the codes are embedded into the HTML codes itself. Is it true? Also, is there any impact on the page size?

Your comments are very much appreciated. Thank you.

Cheers,

To start off, I'm having problems figuring out what to look for, let alone research it myself. If I'm posting in the wrong place, or there's a page you can link me to, please do that.

I'm trying to do a webpage for my band, and what I'm trying to do is similar to blogging sites, like tumblr.

I'm trying to make a page that my bandmates and I can go on, type what we want, add photos, ect, and submit it so it appears on our home page as a news article.

So, a simple 1 page with form section to submit, and it appearing on another page as a new article, above the old ones.

Thanks in advance for the help!

I know from personal experience, the specs and some great posts that DIV's are not allowed inside of P tags. And it's normal to be so, but what about inline-blocks?

I could simply use SPAN or some other inline element which works inside the P, but IE only renders natural blocks as inline-block. Meaning if it's an inline element it will work in Firefox but not IE, if it's a block the other way arround.

So how do I solve this quanundrum?

Either I need an element which is a natural block in IE and is allowed inside a P by the specs, or I'll use DIV instead of P, but I would much rather avoid this.

In a nutshell:
---

The following <li> tags are inline-blocks. Why does removing the closing <li> tags fix the whitespace issue?

Code:

	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>

Versus...

Code:

	<li>Item one
	<li>Item two
	<li>Item three

The context of this question:
---

From:
CSS display: inline-Block: Why It Rocks, And Why It Sucks

The above post is about using inline-block instead of float to position <li> elements, which is useful for making navigation bars.

There is one drawback to using inline-block:
(You can copy and paste the first piece of code below to see what I'm talking about.)
If you restrict the <ul> to a particular width, your navbar won't display correctly, which has something to do with hitting the RETURN key between your lines of code (whitespace issues?). See below:

This works fine because there we didn't hit RETURN to create a line break between each list.
<li>Item One</li><li>Item Two</li>

Here, we hit RETURN to put each list on a separate line and now the code doesn't display properly. The first piece of code below illustrates this problem.
<li>Item One</li>
<li>Item Two</li>

The second piece of code solves this problem by using comments to remove the whitespace.

The third piece of code solves this problem by removing the closing <li> tags. My question is, how does removing closing tags change anything? Are there any issues I should be aware of if I use this solution? Are there other contexts where I can apply a similar technique?




Code:

<style type="text/css">

	ul#display-inline-block-example,
	ul#display-inline-block-example li {

		margin: 0;
		padding: 0;
	}

	ul#display-inline-block-example {
		width: 300px;
		border: 1px solid #000;
	}

	ul#display-inline-block-example li {
		display: inline-block;
		width: 100px;
		min-height: 100px;
		background: #ccc;
		vertical-align: top;

	}
</style>

<ul id="display-inline-block-example">
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
</ul>

Code:

<style type="text/css">

	ul#display-inline-block-example,
	ul#display-inline-block-example li {

		margin: 0;
		padding: 0;
	}

	ul#display-inline-block-example {
		width: 300px;
		border: 1px solid #000;
	}

	ul#display-inline-block-example li {
		display: inline-block;
		width: 100px;
		min-height: 100px;
		background: #ccc;
		vertical-align: top;

	}
</style>

<ul id="display-inline-block-example">
	<li>Item one<!--
	--><li>Item two</li><!--
	--><li>Item three</li>
</ul>

Code:

<style type="text/css">

	ul#display-inline-block-example,
	ul#display-inline-block-example li {

		margin: 0;
		padding: 0;
	}

	ul#display-inline-block-example {
		width: 300px;
		border: 1px solid #000;
	}

	ul#display-inline-block-example li {
		display: inline-block;
		width: 100px;
		min-height: 100px;
		background: #ccc;
		vertical-align: top;

	}
</style>

<ul id="display-inline-block-example">
	<li>Item one
	<li>Item two
	<li>Item three
</ul>