Well, in FF my logo is somewhere in the middle, but in safari it is on the left side. I tried to fix it using margin-left and margin-right to push it around in firebug but it doesn't do anything. If you are floating something does it ignore margins?
Also, could someone help me figure out my rollover situation? On the listings I have it where it changes color on the rollover, but I can't figure out how to get it to return to the default color when you move your mouse off. With onmouseout you have to specify a color. Is there some value for "default"?
Thanks.
HTML:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\"> <html>
I had something like that today too. Try add display:block; to some element(s)? At least that was the solution for my problem.
And about the rollover: I should not change the background-color, but just give it an extra class with the color inside that class. When you mouseout you can remove that class again. I think that's the easiest solution. Good luck!
Excellent. Now it looks the same in both browsers.
Unfortunately, I can't move the logo box to the right where it needs to be. I've tried messing with margin and padding for both the logobox and the top adbox and I'm not getting any results.
There is still more space between the green bar and the logobox/top adbox in FF than in Safari. I can live with that but that still tells me something is wrong with my code. Thoughts?
Regarding the space between the logo and the green, its the .logobox class again - margin-top is on 29 - adjust that to desired value.
To be honest your code is just a bit messy. If I were you I would try and recreate your site starting with fresh css and xhtml. To explain; [list] [*]your first div is called back1 - these attributes could easily be added to your body attributes.[/*:m] [*]I am guessing search box is the holding div for the top green area... it doesn't actually hold anything it just colours in the top area (and I'm not sure why you didn't use a colour value for this)[/*:m] [*] None of your div's have id tags, they all use class tags.[/*:m] [*]classes are filled to the brim with attributes; a fair few of these are not doing anything now but could mess things up in other browsers in the future.[/*:m] [*]You switch to tables soon as you hit content - could be worth sticking with divs.[/*:m][/list:u]
Its a really nice looking site but I would watch the Converting a Photoshop Mockup and just re structure the site. You have all the images so it really shouldn't take long. It will save you so much time in the future!
Regarding the space between the logo and the green, its the .logobox class again - margin-top is on 29 - adjust that to desired value.
To be honest your code is just a bit messy. If I were you I would try and recreate your site starting with fresh css and xhtml. To explain; [list] [*]your first div is called back1 - these attributes could easily be added to your body attributes.[/*:m] [*]I am guessing search box is the holding div for the top green area... it doesn't actually hold anything it just colours in the top area (and I'm not sure why you didn't use a colour value for this)[/*:m] [*] None of your div's have id tags, they all use class tags.[/*:m] [*]classes are filled to the brim with attributes; a fair few of these are not doing anything now but could mess things up in other browsers in the future.[/*:m] [*]You switch to tables soon as you hit content - could be worth sticking with divs.[/*:m][/list:u]
Its a really nice looking site but I would watch the Converting a Photoshop Mockup and just re structure the site. You have all the images so it really shouldn't take long. It will save you so much time in the future!
Yeah. My code is pretty messy for two reasons.
The first reason is the design was developed by trial and error. I'm still learning so I basically try different things and once it looks the way I want it to work I leave it alone. Even though there are probably much better ways to code my layout, if it ain't broke, don't fix it (at least for now).
The second reason is this is a joint project between me (the designer/html css coder) and another guy (the php coder). That's the reason for the tables since his priority is the backend and not the frontend. I just took what he did and stuck it in the design where I had a placeholder.
We're wanting to launch pretty soon and changing the tables over to div's is low on my priorities. Hopefully after we launch I will be able to do the right tweaking. I'm not even trying to get it to validate right now. Tomorrow though, I will be fixing it for IE. I might need the number for a suicide hotline before I'm done with that. ;)
As far as the back1 div's and the back2 divs, that was an issue I was trying to take care of in a previous post.
I'd love to get the site to look the same with much better code. If anyone has any suggestions for me, that would be tremendously helpful.
Well, in FF my logo is somewhere in the middle, but in safari it is on the left side. I tried to fix it using margin-left and margin-right to push it around in firebug but it doesn't do anything. If you are floating something does it ignore margins?
Also, could someone help me figure out my rollover situation? On the listings I have it where it changes color on the rollover, but I can't figure out how to get it to return to the default color when you move your mouse off. With onmouseout you have to specify a color. Is there some value for "default"?
Thanks.
HTML:
CSS:
* { margin: 0; padding: 0; }
img, div { behavior: url(iepngfix.htc) }
body
{
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;
}
.back1
{
background:url(images/back1.jpg);
background-position: left top;
background-repeat:no-repeat;
}
.back2
{
background:url(images/back2.jpg);
background-position: right bottom;
background-repeat:no-repeat;
}
.searchbox
{
background:url(images/topgreen.png);
background-repeat:no-repeat;
margin:0px auto;
height:30px;
width:999px;
}
.everything
{
background:url(images/bg.png);
background-position: center top;
background-repeat:repeat-y;
margin:0px auto;
width:999px;
display:block;
}
.villiesflyer
{
background:url(images/villiesflyer.jpg);
background-repeat:no-repeat;
margin:0px auto;
height:1241px;
min-height:1241px;
width:959px;
}
.searchformbox
{
margin-top:-27px;
margin-left:30px;
}
.sort-area {float:left;
width:300px;
}
.search-area {float:right;
width:240px;
}
.logobox
{
background:url(images/newlogo.jpg);
width:175px;
min-height:135px;
height:135px;
margin-left:0px;
margin-top:33px;
padding-left:10px;
float:left;
}
.adtopbox
{
background:url(images/adtopholder.jpg);
background-repeat:no-repeat;
width:730px;
min-height:90px;
height:90px;
margin-left:200px;
margin-top:-120px;
padding-right:65px;
float:right;
}
.adbox
{
background:url(images/adboxholder.jpg);
width:300px;
min-height:250px;
height:250px;
float:right;
margin-right:70px;
margin-top:15px;
}
.skyscraper
{
background:url(images/skyscraperad.jpg);
width:160px;
min-height:600px;
height:600px;
float:right;
margin-right:-223px;
margin-top:294px;
}
.contentbox
{
width:560px;
min-height:100px;
padding: 5px;
background-position: left top;
margin-left:30px;
}
.comingsoon
{
background:url(images/comingsoon.jpg);
background-repeat:no-repeat;
margin:0px auto;
height:600px;
width:960px;
}
.description
{font-size:16px;
}
.results
{
margin-left:30px;
}
.resultspadding
{
padding:5px;
}
.restname
{
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:20px;
font-weight:bold;
}
.floatleft {
float: left;
margin: 0px 10px 10px 0px;
}
.refine
{
background-color:#eeeeee;
min-height:25px;
width:890px;
padding:5px;
margin-left:30px;
margin-top:60px;
background-position: center top;
}
/*Footer*/
#footer {
padding:10px 0px 70px 10px;
color:#0c0c0c;
width:951px;
background-color:#daf2c8;
font-size:9px;
text-align: left;
line-height:12px;
margin:35px auto 0px;
}
#footer img {
float:left;
margin-right:10px;
}
#footer span {
display:block;
float:left;
width:300px;
}
#footer a {
color:#9e8292;
text-decoration:none;
}
img {border:none}
div.clear { clear: both; }
.boxlink
{
color:#000000;
text-decoration:none;
}
And about the rollover: I should not change the background-color, but just give it an extra class with the color inside that class. When you mouseout you can remove that class again. I think that's the easiest solution. Good luck!
Unfortunately, I can't move the logo box to the right where it needs to be. I've tried messing with margin and padding for both the logobox and the top adbox and I'm not getting any results.
But in the logobox class, get rid of your padding-left and replace with a margin left of 30px and it looks fine and dandy to me!
p.s. footer could do with losing a px in width!
There is still more space between the green bar and the logobox/top adbox in FF than in Safari. I can live with that but that still tells me something is wrong with my code. Thoughts?
To be honest your code is just a bit messy. If I were you I would try and recreate your site starting with fresh css and xhtml.
To explain;
[list]
[*]your first div is called back1 - these attributes could easily be added to your body attributes.[/*:m]
[*]I am guessing search box is the holding div for the top green area... it doesn't actually hold anything it just colours in the top area (and I'm not sure why you didn't use a colour value for this)[/*:m]
[*] None of your div's have id tags, they all use class tags.[/*:m]
[*]classes are filled to the brim with attributes; a fair few of these are not doing anything now but could mess things up in other browsers in the future.[/*:m]
[*]You switch to tables soon as you hit content - could be worth sticking with divs.[/*:m][/list:u]
Its a really nice looking site but I would watch the Converting a Photoshop Mockup and just re structure the site. You have all the images so it really shouldn't take long. It will save you so much time in the future!
Yeah. My code is pretty messy for two reasons.
The first reason is the design was developed by trial and error. I'm still learning so I basically try different things and once it looks the way I want it to work I leave it alone. Even though there are probably much better ways to code my layout, if it ain't broke, don't fix it (at least for now).
The second reason is this is a joint project between me (the designer/html css coder) and another guy (the php coder). That's the reason for the tables since his priority is the backend and not the frontend. I just took what he did and stuck it in the design where I had a placeholder.
We're wanting to launch pretty soon and changing the tables over to div's is low on my priorities. Hopefully after we launch I will be able to do the right tweaking. I'm not even trying to get it to validate right now. Tomorrow though, I will be fixing it for IE. I might need the number for a suicide hotline before I'm done with that. ;)
As far as the back1 div's and the back2 divs, that was an issue I was trying to take care of in a previous post.
I'd love to get the site to look the same with much better code. If anyone has any suggestions for me, that would be tremendously helpful.
Thanks all!