HTML - Newbie With General Layout Problems

Hello - I have a couple of layout problems in IE 6 & 7 with a website I'm working on.

This is the page: http://www.suecorr.com/painting.html

I have a class on every fourth thumbnail to get rid of the border on the right hand side, I need the border on all the other ones apart from the ones on the right. This causes problems in IE6 and 7.

This is the HTML for the begining of the gallery
Code:

<div id="gallery">

					<ul>
					
					<li>
					<a href="images/Paintings/painting-1.jpg">
					<img src="images/Paintings/th-1.jpg" width="185" height="100" />
					</a>
					</li>

					<li>
					<a href="images/Paintings/painting-2.jpg">
					<img src="images/Paintings/th-2.jpg" width="185" height="100" />
					</a>
					</li>
					
					
					<li>
					<a href="images/Paintings/painting-3.jpg">
					<img src="images/Paintings/th-3.jpg" width="185" height="100" />
					</a>
					</li>
					
					<li>
					<a href="images/Paintings/painting-4.jpg">
					<img class="right"  src="images/Paintings/th-4.jpg" width="185" height="100" />
					</a>
					</li>

And the CSS for the gallery:
Code:

#gallery{
	width: 800px;
	height: 100%;
	min-height: 100%;
	background-color:#FFFFFF;
	padding: 20px 50px 20px 50px;
	margin: 0 0 0 0;
	display: inline;
	clear: both;
	float: left;

}

#gallery img{
	margin: 10px 23px 13px 0;
	float: left;
}


#gallery img.right {
	margin: 10px 0 0 0;
	padding: 0 0 0 0;
	
}

#gallery ul { 
		list-style: none;
		margin-left: 0;
					
}
					
#gallery li { 
		padding: 0 0 0 0;
}
				 

#gallery ul li { 
		display: inline;
		padding-right: 0;
}
	
#gallery ul img {
		border: 0;
		border-width: 0;
}

	
#gallery img {
	-webkit-transform: scale(1);
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 300ms;
}
#gallery img:hover{
	-webkit-transform: scale(1.05);
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 300ms;
}

Thanks for any advice.

Dyfrig

Hi, I am trying to sort out my layout on my site: http://www.dogula.co.uk/index3.php
I would like to start adding new pages very soon with a new layout but there is a few things I would like to get sorted first.

As you can see the dots continue way off the page, how could I change it so whatever i type only stays in that div box?
I am using php require and css stylesheets so I can change everything quickly in one go but there are some things I am not using with php such as everything in the head, would it be ok to use php require for that or is there another way to change it at a later date?
I tried using a google search bar as a seach box for my site, but nothing is appearing, they do appear if I use the google site though, does anyone know what I am doing wrong?
Most of all as I am going to be making a lot of pages and I don't want to be changing each page one by one, is there anything wrong with the template that could not be changed via style sheets later?

Please help me with any questions you can answer, thank you in advance to anyone who can help.

I'm using the Nifty Corners Cube engine to make a 3-column layout (obviously also with rounded corners ).
It works fine except for one thing- the columns have no spacing between them no matter what margin I assign to the left, right or center columns (or even padding).
The site is at http://www.clanzephyr.uni.cc. Any suggestions?

I am trying out a couple of layouts for presenting some information in
table format. Basically, two tables side by side.

Table 1: 3 rows, one column fixed width.
table 2: A calendar format with 3 rows.

In FF they are displayed as I want them. Even if I include an overflow
to force a horizontal scrollbar. Ok I know. But if horizontal
scrollbars are not desired, then why do we have them?
In IE the overflow is totally ignored.

Should I happen to have in table 1, a 4th line of text, then the <hr>
I use as a seperator, shows up floating beside table 1, not underneath
it as it should.
Easily fixed with a <br> but I feel that should not be necessary.

In IE, A horizontal scroll bar is not displayed until the data is
forced way beyond the edge unlike in FF. Then table 2 drops below
table 1 which is not where I want it.

In another format, I simply place table 2 under table 1. Which is ok
but just doesn't look right.

Anyone have a site that discusses this problem and how to work around
it so that the browsers are satisfied and the tables show as I want?

I am making a table layout and am having a problem. There are two pictures enclosed.. one is how is should look (minus text) and the other is how it shows up in InternetExplorer

Table Code:


<body text=#FFFFFF LINK=#FFFFFF ALINK=#FFFFFF VLINK=#FFFFFF>


<table width="770" valign="top" border="0" cellpadding="0" cellspacing="0" align="center" alt="">

<tr>
<td colspan="4">
<img src="images/header_01.png" width="770" height="185" alt=""></td>
</tr>


<tr>
<td colspan="2" valign="left" width="446" height="71" alt="" style="background: url('images/header_02.png') no-repeat; padding-top: 0px; padding-left: 446px; padding-right: 0px; padding-bottom: 0px;">
</td>

<td colspan="2" valign="right" width="324" height="71" alt="" style="background: url('images/header_03.png') no-repeat; padding-top: 12px; padding-left: 10px; padding-right: 535px; padding-bottom: 0px;">
<!---------------------------------News----------------------------------->
<p class="marquee">
<Marquee direction="left" scrollamount="2" scrolldelay="50">
News at 11!
</Marquee></p>
<!---------------------------------News----------------------------------->
<td>

<tr>
<td width="229" colspan="1" valign="top" alt="" style="background: url('images/header_04.png') repeat; padding-top: 0px; padding-left: 80px; padding-right: 225px; padding-bottom: 5px;">
<!---------------------------------Navigation------------------------------------>
<p class="nav">Main</p>
<p class="li">
= <a href="index.html">Home</a><br>

</p>
<!---------------------------------Navigation------------------------------------>
</td>



<td class="padding" colspan="2" valign="top" width="282" alt="" style="background: url('images/header_05.png') repeat; padding-top: 40px; padding-left: 3px; padding-right: 3px; padding-bottom: 5px;">
<!----------------------------------Content-------------------------------------->
<center>*insert title*</center>
<!----------------------------------Content-------------------------------------->
</td>



<td colspan="1" valign="top" width="257" height="21" alt="" style="background: url('images/header_06.png') repeat; padding-top: 8px; padding-left: 0px; padding-right: 0px; padding-bottom: 5px;">
<!------------------------------------Info--------------------------------------->
<center>Hey!</center>
<!------------------------------------Info--------------------------------------->
</td>
</tr>



<tr>
<td colspan="1" valign="top" width="770" height="118" alt="" style="background: url('images/header_07.png') no-repeat; padding-top: 50px; padding-left: -1px; padding-right: 0px; padding-bottom: 30px;">
<!-----------------------------------Credits--------------------------------------->
<center>
Site is Copyright &copy; of Concord Cosplay Group 2007<br>
Layout by Joel Watson
</center>
<!-----------------------------------Credits--------------------------------------->

</td>
</tr>






</table>



</body>

Hello, i'm having a problems of HTML layout on my website, anyway out there can helps me? i don't know how to uploaded images to show you guys but i already post it in my new blog i wish all of you can login and have a look on my problems.http://dubspro.blogspot.com/

Below is my coding i wish u guys can help me out thank you.

<body>
<table width="100%" cellpadding="" cellspacing="" border="0">
<tr>
<td width="50%">
</td>
<td>
<table cellpadding="" cellspacing="">
<tr>
<td colspan="3">
<img src="Final Year Project/heading.jpg" width="780" height="52" /></td>
</tr>
<tr>
<td>
<img src="Final Year Project/heading1.jpg" /></td>
<td>
<img src="Final Year Project/heading2.jpg" /></td>
<td>
<img src="Final Year Project/heading3.jpg" /></td>
</tr>
<tr>
<td colspan="3"><img src="Final Year Project/heading4.jpg" /></td>
</tr>
<tr>
<td colspan="3" >
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="Final Year Project/heading5.jpg" />
</td>
<td><img src="Final Year Project/button1.jpg" />
</td>
<td><img src="Final Year Project/heading6.jpg" />
</td>
<td><img src="Final Year Project/button2.jpg" />
</td>
<td><img src="Final Year Project/heading7.jpg" />
</td>
<td><img src="Final Year Project/button3.jpg" />
</td>
<td><img src="Final Year Project/heading8.jpg" />
</td>
<td><img src="Final Year Project/button4.jpg" />
</td>
<td><img src="Final Year Project/heading9.jpg" />
</td>
<td><img src="Final Year Project/button5.jpg" />
</td>
<td><img src="Final Year Project/heading10.jpg" />
</td>
<td><img src="Final Year Project/button6.jpg" />
</td>
<td><img src="Final Year Project/heading11.jpg" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="13" b><img src="Final Year Project/heading12.jpg" />
</td>
</tr>
</table>
</td>
<td width="50%">
</td>
</tr>
</table>
</body>
</html>

Hey, I have my own website. I thought it was all looking fine but I use mozilla firefox, so I tested my website out on Internet Explorer 7 and found some errors.

I have sorted them all out apart from one. I have a table with 3 rows, I need the first and third to be about 15px wide and the middle to be the rest of the page.
I can do this but when I set the table border to 1 it all looks fine. I set the table border to 0 and it all squeezes in to be about 100px in width.

What I need to know is there a way to keep the border but make it invisible if you know what I mean, not setting the border to 0 but to keep it at 1 but making it not visible.
Or of course any other way.

Thanks in advance.

Tom.

In preparing to learn in-depth info about DW and all the terms that come with web designing:

What exactly does the term slide toggle mean? I came across this term, in one of the threads, and googled it but still did not understand the term.

I was suprised to see that DW has a few critics out there. With each type of programming language, I gather that there are pro's and con's for each but specifically, what are the con's to DW? I invested in CS5 and I am looking forward to working with php and MySQL in conjunction with DW.

Thank you in advance!

well not really sure if it would be html or more in the lines of css but 1st just wanna say sorry for brining up myspace again but is there a way to hide the comments from the page source as well as just the actual page that's viewed?

Ok, please bare with me because I know I probably sound really stupid.


I have bought a domain at freewebs.com, and I am pretty good at making graphics so I figures making a website wouldn't be that hard....well I was wrong. Anyways I am making the layout, but how do I code that into actually becoming the main page? And then once I do that how am I suppsoed to edit it to do news updates etc? I'm so lost it's ridiculous. Any help is appreciated!

Tyler

Hi guys. I'm working on a website, using ASP.NET. I'd just like to find out if there is anything specific that all websites should have, i.e. an about page with information about the owner and author of the site. Anyone have some advice?

Hello,

I'm going to be updating an HTML website for a friend, and it's going to be a very basic webpage. Mostly HTML with a little JavaScript thrown in for fun.

My question is, how do I handle content management for the user? The website is going to be a standard setup with a "New Information" section on the homepage. This section will be updated by the admin (my friend) on a regular basis, but I'd like to be able to have her update this info in a more user-friendly manner than updating the actual HTML code.

Content management is new to me, so I'm open to any suggestions. Thanks in advance!

hi im a newbie in this forum and i would like to know 2 things

can someone explain what is the different between this 2 code: this code normally appear on the top or the first line on html code ( before <html> tag )

THIS: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
AND: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

what is the advantage or disadvantage between both. will it make any different for users or search engine?

thanks

Hi,
How can i change the source code of my home page?
You can modify the source code and save it as a .txt and then again as some other file type, which I can't remember, So that the off line page is whatever you want it to be, Say if I want to change the color or edit the text of MSN etc. Your "Homepage" refers to a file in your system and not on the web, Unpublished. Does anyone know about this? A computer science professer showed me a few years ago.

Happy New Year

This is the site in question:
http://www.kzoo.edu/ultimate/home2.htm

I'm pretty bad at HTML but I've been making due with various guides and such so if you're actually looking at the code it's probably really messy.

-I'd like all of the links on the left to be fixed, so that scrolling down and such doesn't affect their movement. How could I do that?

-I'd also like the "last updated" on the bottom to be fixed, but I'd also like it so that it's always on the bottom regardless of what resolution you're using. How could I do that?

-Finally, I want to figure out how to enter text in a paragraph in the center of the page without affecting the location of the links on the left. I tried using the center tag and such, but it would create a new line and mess up the spacing on the left.

Thanks.