My new website design, Need a little help :)

The pokemon kid · 1 Nov 2011

I have decided to re- design my website. Im very happy with the result.

Check this out!

http://www.teaguephotography.co.uk/

I need a little help though. The container which i have created which contains all of my navigation links, the background of it seems to turn black in Internet explorer. Im kinda confused why it is doing it... :bang: Can someone please tell me why it is doing it...

This is the CSS of the link container:

.linkcontainer{
font-family:Verdana, Geneva, sans-serif;
font-size:22.5px;
width:550px;
height:50px;
text-align:center;
margin-left:-930px;
margin-top:297px;
background-color:transparent;

/* Safari */
-webkit-transform: rotate(270deg);

/* Firefox */
-moz-transform: rotate(270deg);

/* IE */
-ms-transform: rotate(270deg);

/* Opera */
-o-transform: rotate(270deg);

/* Internet Explorer */
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=4);

}

Kind regards,
Mat

tpd · 4 Nov 2011

Have you tried background-color:none;

petersmart · 5 Nov 2011

When I tried to validate your site's home page it showed 31 errors and 24 warnings.

You really need to put all these errors right otherwise you're just just going to get more and more problems.

Incidentally it shows OK in Firefox and Opera for the home page but in Crazy Browser the navigation is totally wrong.

.

rowla · 5 Nov 2011

I'd say it is the rotate that is causing it in IE9. Try removing the rotate and see if the black background disappears. Not sure of a proper fix though.

You could do an if ie9 css rule & make the links in the container white, then at least ie9 users can see them.
While you are at it you could/should do an if 1e 7 & 8 rule too to move the links as the rotate won't work so your links will be half hidden behind the nivo slider. Maybe position the links container above the slider for all IE only.

The pokemon kid · 5 Nov 2011

petersmart said:
When I tried to validate your site's home page it showed 31 errors and 24 warnings.

You really need to put all these errors right otherwise you're just just going to get more and more problems.

Incidentally it shows OK in Firefox and Opera for the home page but in Crazy Browser the navigation is totally wrong.

.

The errors and warnings are fine. Four of them are for the favicon which is fine. a lot of them are for the closing tags as it wants me to move the slash, but it doesnt do anything and the rest seam to be little bits of javascript that dreamweaver puts in for the obscure browsers. The code is all good except for this bit which im having a problem with...

The rotation css which i have used works in chrome, IE, Safari, firefox, opera and i think netscape... What was the other browsers you used?

rowla said:
I'd say it is the rotate that is causing it in IE9. Try removing the rotate and see if the black background disappears. Not sure of a proper fix though.

You could do an if ie9 css rule & make the links in the container white, then at least ie9 users can see them.
While you are at it you could/should do an if 1e 7 & 8 rule too to move the links as the rotate won't work so your links will be half hidden behind the nivo slider. Maybe position the links container above the slider for all IE only.

I want to keep the rotation as much as I can really... Its one of the key parts of the site so it matches with the logo and soon, my business cards... haha

The people that used this same CSS before haven't had any problems with the background turning black. it just seams a little weird. But i will trawl the net til i find the solution...

tpd said:
Have you tried background-color:none;

I havent tried this. I have put : background-color: transparent. That did nothing... I will give it a try...

Thanks for all your messages!

The pokemon kid · 5 Nov 2011

Managed to solve the problem. It was as Rowla said. but the way in which i fixed it came partially from TPD. I decided to sort out the rotation stuff as it wasnt completely correct. that didnt do anything, so i gave the link container a background image which is the same as the normal background, this got rid of the black background.

Here is what the code now looks like:

.linkcontainer{
font-family:Verdana, Geneva, sans-serif;
font-size:22.5px;
width:550px;
height:50px;
text-align:center;
margin-left:-930px;
margin-top:297px;
background-image:url(../Images/Foreground.png);
background-repeat:repeat;
/* Safari */
-webkit-transform: rotate(270deg);

/* Firefox */
-moz-transform: rotate(270deg);

/* IE */
-ms-transform: rotate(270deg);

/* Opera */
-o-transform: rotate(270deg);

/* Internet Explorer */
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=4);

display:block;
}

If you refresh the page, you can see the black and then the images/ the repeat of it make it disappear.

petersmart · 6 Nov 2011

The pokemon kid said:
The errors and warnings are fine. Four of them are for the favicon which is fine. a lot of them are for the closing tags as it wants me to move the slash, but it doesnt do anything and the rest seam to be little bits of javascript that dreamweaver puts in for the obscure browsers. The code is all good except for this bit which im having a problem with...

TBH it always amazes me that just because a site works (?) it is assumed that the standards don't need to be applied.

And for me at least, 31 errors and 24 or more warnings I would consider anything but fine.

Unfortunately in Crazy Browser the rotate still doesn't work.

And the site now doesn't fit onto my usual 1024x768 page.

In addition by the time your site loaded and I got to the gallery page it had already used over 3Mb of data.

I hope you have a host who allows you a very large amount of data downloads otherwise you are very quickly going to run out of allowance.

edit: Just checked it in internet 8 and the rotate is still not working.

'

The pokemon kid · 6 Nov 2011

petersmart said:
TBH it always amazes me that just because a site works (?) it is assumed that the standards don't need to be applied.

And for me at least, 31 errors and 24 or more warnings I would consider anything but fine.

Unfortunately in Crazy Browser the rotate still doesn't work.

And the site now doesn't fit onto my usual 1024x768 page.

In addition by the time your site loaded and I got to the gallery page it had already used over 3Mb of data.

I hope you have a host who allows you a very large amount of data downloads otherwise you are very quickly going to run out of allowance.

edit: Just checked it in internet 8 and the rotate is still not working.

'

The four favicon errors are for the tiny image that goes on the tag. That would be the tp you would see. It puts it as a error as one of the major browsers still doesn't support it for some reason... but it works on all the other browsers, so I can miss those errors. The next few are for the roll over logo. It uses javascript and to make it compatible with all browsers it adds a little code into it. Which bring up a error for some reason. The code isn't wrong. It is very much needed. But still its classed as an error.

Many of the warnings that are shown are for the different div tags there are... it seems to think the slash should be moved to after. So it is now </div> and it wants to change it too <div/>. I will go through a little later in more detail as I'm looking on my phone at the moment...

What's the other browser called? Or is of actually crazy browser? Haha

Yeh, I need to move the site a bit because the mac menu was on the other side. When you mean it isn't fitting ate you simply meaning that the logo isn't quite fitting? Cus when I tried it on some really old computer that was what wasn't fitting...

I will have to check, but its hosted off a dedicated server with a lot of space and bandwidth.

It should be working as that rotate code is supported back to ie7.

petersmart · 6 Nov 2011

The pokemon kid said:
The four favicon errors are for the tiny image that goes on the tag. That would be the tp you would see. It puts it as a error as one of the major browsers still doesn't support it for some reason... but it works on all the other browsers, so I can miss those errors. The next few are for the roll over logo. It uses javascript and to make it compatible with all browsers it adds a little code into it. Which bring up a error for some reason. The code isn't wrong. It is very much needed. But still its classed as an error.

Many of the warnings that are shown are for the different div tags there are... it seems to think the slash should be moved to after. So it is now </div> and it wants to change it too <div/>. I will go through a little later in more detail as I'm looking on my phone at the moment...

What's the other browser called? Or is of actually crazy browser? Haha

Yeh, I need to move the site a bit because the mac menu was on the other side. When you mean it isn't fitting ate you simply meaning that the logo isn't quite fitting? Cus when I tried it on some really old computer that was what wasn't fitting...

I will have to check, but its hosted off a dedicated server with a lot of space and bandwidth.

It should be working as that rotate code is supported back to ie7.

Well the edge of TEAGUE is cut off because the site is just too wide to be viewed when 1024x768 is set.

Part of your coding problem may be because you have 2 "link rel"s which have not been closed.

And at the bottom you seem to have opened 5 containers and only closed 2 of them:

<div class="centralcontainer">

<div class="Slidercontainer">
<div id="wrapper">

<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="Images/Index/Image1.jpg" alt="" />
<img src="Images/Index/Image2.jpg" alt="" />
<img src="Images/Index/Image3.jpg" alt="" />
<img src="Images/Index/Image4.jpg" alt="" />
<img src="Images/Index/Image5.jpg" alt="" />
<img src="Images/Index/Image6.jpg" alt="" />
</div></div>

Leaving containers unclosed can cause major problems with layout.

I also use XHTML transitional and </div> is the correct way.

But apart from that I can't see why you're wasting time and effort on something which causes such problems when all you have to do is create a .gif pic with the text on it, rotate it in your editor to the right position and then simply place it where you want as an ordinary or a background image.

Much simpler.

.

The pokemon kid · 6 Nov 2011

Yeh, I have found that problem on a few screens now and the resolutions. I need to move it across because the nav menu used to be on the other side and had to move everything across to the left slightly more. but not that everything is on the left, i need to pull the website slightly further right. That is fairly easy to do and i will update it as soon as i have got some time today...

That piece of code from the wrapper opening down to where the end of the images were specificied is the same code as what the people from Nivo give you... I will go through the code and see how it changes.

The problem is that, there is hardly any text on the page and they are like that for when i want to have the google pages thing set up as it gets a bit difficult if they are images...

also, it would just be another thing to load onto the page, whereas text will load very quickly...

Any suggestions on way of putting the google ad words onto my website? As at the moment, im only getting traffic by posting up the link to facebook/ other social networking sites and my business cards...

petersmart · 6 Nov 2011

The pokemon kid said:
Yeh, I have found that problem on a few screens now and the resolutions. I need to move it across because the nav menu used to be on the other side and had to move everything across to the left slightly more. but not that everything is on the left, i need to pull the website slightly further right. That is fairly easy to do and i will update it as soon as i have got some time today...

That piece of code from the wrapper opening down to where the end of the images were specificied is the same code as what the people from Nivo give you... I will go through the code and see how it changes.

The problem is that, there is hardly any text on the page and they are like that for when i want to have the google pages thing set up as it gets a bit difficult if they are images...

also, it would just be another thing to load onto the page, whereas text will load very quickly...

Any suggestions on way of putting the google ad words onto my website? As at the moment, im only getting traffic by posting up the link to facebook/ other social networking sites and my business cards...

Well whatever NIVO gave you that code is still wrong.

Frankly with the tiny amount of text on your homepage Google will have virtually nothing to index anyway which more or less rules out adwords as Google wants a site with good traffic.

That's the trouble with all these "minimalist" sites - no text - no indexing - no traffic.

If you want your site to get indexed properly then it needs a major re-think.

A good start to find out what Google wants is here:

http://www.google.com/webmasters/

right from the horse's mouth.

.

The pokemon kid · 6 Nov 2011

I have no uploaded most of the changes. I have moved it across a bit so it fits better.

I have also closed off all the tags as well and they havent moved anything on the site.

I have also added some Meta tags into it. to boost my search engine listings.

Google have gotten clever towards hidden words on the page anyways , they dont like hidden stuff anymore and it will lower your page rankings...

Edit: Also added copyright stuff onto it...

petersmart · 6 Nov 2011

Well it certainly fits better now with all the text comfortably on my screen.

You still have 2 link rel's unclosed as well as other probs.

And you are quite right about hidden text - it can be a banning offence for Google, but as I already said if you want to rate highly on the SEs you need TEXT - lots of informative text.

Unfortunately the Meta Tags you have will not make much difference - you don't want too many keywords or phrases since that could be looked on as keyword stuffing.

And many people question whether Google and others take much notice of keywords.

The description on the other hand is important as is the title - but you only want about 7-10 words in the description which should also tie in with keywords used in the page's text where keywords ARE important.

So once again TEXT is the key to successful ratings in the SEs.

.