a couple align issues...

[hockeykid]

Hi,

Sorry for the lame title, I know there are a couple issues on a page on my site, but I'm not exactly sure what, so I couldn't be terribly specific.

Problem #1: On my portfolio page, I have a horizontal scrollbar. Also, I have one on the web portfolio and the graphics portfolio page. I'm not sure why it's doing this. I want them centered, the way they are now, but I do not want a horizontal scrollbar.

Problem #2: In Firebird, the "web porfolio" and the "graphics portfolio" boxes appear inside the div which contains the graphics for the portfolio. If you go to the site you'll understand what I mean. In IE, the "web porfolio" and the "graphics portfolio" boxes appear above the div which contains the graphics, that is the way I want it to be. Can anyone tell me why that is?

The site - Go to the portfolio page.

My web portfolio, is a little messy, the code and the rollover effect, but that's another problem all in itself. So I'll leave that until another time.

Thank you in advance!

[Paul O'B]

Hi,

The reasons you have a horizontal scroll bar is that you have made the width in the following elements 99% but you have also added 5px padding and margins. This will make the elements bigger than 100%.

#bottomtextportfolio {
			   float:left;
			   width: 99%;
			   text-align:center;
			   background-color:transparent;
			   margin-left:5px;
			   margin-right:5px;
			  }

#portfoliobox {
			   float:left;
			   background-color:transparent;
			   width:99%; 
			   margin:5px;
			   padding:5px;
			   text-align:center;
			  }

I'm not sure why you have floated the elements either as all you want is them to be centred.

Try this instead:

#bottomtextportfolio {
			   text-align:center;
			   background-color:transparent;
			   margin-left:5px;
			   margin-right:5px;
			  }

#portfoliobox {
			   background-color:transparent;
			   margin:5px;
			   padding:5px;
			   text-align:center;
			  }

Hope that helps.

Paul

[Paul O'B]

Hi,

Problem 2 should disappear if you implement the answer to problem 1 above.

However you may also want to centre you portfolio box correctly as it is out of alignment.

Try This:

#portfolio {
	 width:750px;
	 background-color: #ffffff;
	 color:black;
	 border:1px solid #000000;
	 margin-top:15px ;				
	 padding:5px;
	 text-align:center;
	 margin-left:auto;
	 margin-right:auto;
  }

You will also have to cater for ie5 that doesn't understand the margin-left,margin-right:auto that is used to centre elements. The solution is to surround the portfolio div element with another div (in the html) and give it a style of text-align:center which IE5 incorrectly interprets as centring the nested element instead of just centring text as it should.

e.g.

<div style="text-align:center">
	 <DIV id=portfolio style="height:300px"> 
	<H1>web portfolio</H1>
	 etc.......
 
</div>

You can give it a class instead if you want to make it neater.

You have used the xml prologue(the first line of your code) which puts IE6 into quirks mode. You may find it easier to omit this declaration as it is optional anyway (as long as you include the character encoding in the meta tag). Then IE6 will behave more like mozilla (in some aspects). However this may show up other layout problems in the design so it's up to you.

Hope this has helped.

Paul

[hockeykid]

This helps more than you know. Thanks a lot!