http://www.tripyramidstudios.com/test/index.html

the sidebar menu changes the cursor to a 'text' cursor and is all kinds of fucked up in IE7 but in FireFox and Safari it looks the way i want it to. I'm guessing its due to the span tags I have surrounding the text part of the 'a' tag so that its offset to the right

disclaimer: this is still a works in progress....very very early stages so I realize things like font size not being compliant with users who use larger fonts etc....

As for the spacing in IE7, i'm guessing I forgot to reset default padding/margin sizes to 0 since all browsers are different in that respect.

[Edited on October 3, 2007 at 2:37 AM. Reason : .]

10/3/2007 2:36:09 AM

Set all your margins and padding to 0, get rid of the span tag and just pad the LI (or margin the A), until the A tag is where you want it to be.

It's also messed up in Firefox, fyi.

[Edited on October 3, 2007 at 7:49 AM. Reason : .]

10/3/2007 7:49:23 AM

yeah, your site is struggling bro.



bro long have you been at it?

[Edited on October 3, 2007 at 8:29 AM. Reason : and why didnt you just hack up a template?]

10/3/2007 8:29:23 AM

Quote :

"this is still a works in progress....very very early stages"

Quote :

"As for the spacing in IE7, i'm guessing I forgot to reset default padding/margin sizes to 0 since all browsers are different in that respect."

the two things I was already aware of . I just needed some input on the cursor issue...which I'm guessing is the span.

Quote :

"It's also messed up in Firefox, fyi."

whats messed up in FireFox? What version are you using? I haven't tested in earlier versions yet.

Quote :

"bro long have you been at it?"

the actual coding process < 1 hour....spent most of the time making mock-up designs and trying different things with the graphics.

Quote :

"and why didnt you just hack up a template?"

Its still in the beginning stages. Everything is done in the stylesheet so once I'm satisfied with the design I'll create a template with only the 'content' area as a editable region.

[Edited on October 3, 2007 at 9:11 AM. Reason : .]

10/3/2007 9:06:35 AM

Ok, here's the problem

I want the text color to change even when you roll over the image so in order to do that I had to make the a tag the size of the whole li

So I can't change margin or padding on the a tag. I had to create a span within the a tag with the correct offset. Thats whats causing the cursor to change to a text cursor. Any tag within the a tag effects the cursor in that way.

10/3/2007 9:56:59 AM

why not set the UL to have it's own class?

or maybe i'm misunderstanding the problem

10/3/2007 11:15:26 AM

the way I have it setup is this...

#SideBar ul {
list-style:none;
position:relative;
width:191px;
height:300px;
top:90px;
margin:0;
padding:0;
}

#SideBar li {
text-align:left;
display:block;
width:191px;
height:50px;
margin:0;
padding:0;
}

#SideBar li.NewWork01 {
background:url('../images/NewWork01.png') no-repeat top left;
}

#SideBar li:hover.NewWork01 {
background:url('../images/NewWork01-Hover.png') no-repeat top left;
}

#SideBar a {
display:block;
width:191px;
height:50px;
margin:0;
padding:auto 0 auto 60px;
}

#SideBar span {
position:relative;
width:121px;
margin:0;
padding:5px;
float:right;
}

10/3/2007 11:27:52 AM

I think I'll just remove the image from the background and just add a img tag within the a tag and float the text to wrap around the image.

10/3/2007 12:05:47 PM

you could have made the A tag to display as a block, then indent the text appropriately to move over enough so that it wasn't covering up the image.

text-indent: 40px;

or something

10/4/2007 12:56:25 AM

Just for shits and giggles, I also looked at your link in IE6, and the on-hover background doesn't even load in the sidebar in IE6 (the text color does change, however). A slicker solution to that would be to make the normal background and the on-hover background all one image; just double the canvas size of the image and paste the on-hover image below the normal image. Then you could just use something like

#SideBar li:hover.NewWork01 {
background-position 0 -50px;
}

so that when you hover over it, it repositions the background image so that the hover portion is moved up into the visible area of your block. That solution also means that you avoid lag when someone hovers over the block for the first time, while loading the hover graphic. It also works in IE6 and IE5.5, if you have any reason to still give a damn about that; might as well make it as compatible for the oldies as possible when practical, since it's a portfolio site that you might someday be showing to potentially savvy employers.

10/4/2007 4:27:59 AM

I've done something a bit similar to this and found that IE is simply a bit wonky with some elements in determining what cursor to display and whether it should link an anchor tag that's wrapping another element.

You may want to try using div's instead of list items and see if that fixes things. There are quite a few rendering bugs in IE that can be hacked into submission by wrapping everything in another div.

10/4/2007 4:38:16 AM

#SideBar a {
display:block;
width:191px;
height:50px;
margin:0;
padding:auto 0 auto 600px;
text-indent: 60px;
}

that a little more clear on what I mean.

I'd also advise using just the one background image and changing the position on hover.

10/4/2007 8:56:25 AM

I used that before as a ie6 hack on rollovers but forgot all about that LOL thx for the info. I really need to get ie6 installed so I can better test it.

10/4/2007 9:56:27 AM

go get multiple IE. Im using it to keep IE7/6/5.5/5.01 on my system concurrently. It works really well.

Also, please please please get rid of the bubble buttons. It looks cheesy and outdated. I had to be counseled on this by other designers a few months ago, and I'm glad they intervened on me.

10/4/2007 12:38:15 PM

^ http://tredosoft.com/Multiple_IE

10/4/2007 12:41:08 PM

^^ thanks!

I really hate the sidebar buttons too. I was just experimenting but I think I'll make it simillar to the top nav. Or do you not like those too? Wanted to keep the top nav simple but not too plain

10/4/2007 1:24:09 PM

http://www.smashingmagazine.com/2007/10/02/browser-tests-services-and-compatibility-test-suites/

10/4/2007 2:34:23 PM

10/4/2007 3:14:06 PM

you could use the ie plugin for firefox as well if thats what you're using.

granted it will only use whatever version of ie you have running on your machine.

10/4/2007 3:14:47 PM

^^Wrong thread? lol

I'll download that multi-IE program....I'm hoping they have that at my new job too lol...sounds very practical.

10/4/2007 6:33:21 PM

MultipleIE is what I use for my testing as well; it's great.

10/4/2007 7:06:01 PM

Quote :

"#SideBar a { display:block; width:191px; height:50px; margin:0; padding:auto 0 auto 600px; text-indent: 60px; } that a little more clear on what I mean. I'd also advise using just the one background image and changing the position on hover."

most of my buttons are 2 lined....text-indent only indents the first line and the 2nd line starts out all the way over.

10/4/2007 9:01:12 PM

yes thats true, hmmmmm

10/5/2007 7:43:32 AM

then probably the easiest solution is to combine the picture image with the background image to make one background image. You've already got each list item set to its own class anyway, so having each one with its own background is easy to account for.

then you can apply the padding with no problems.

10/5/2007 10:22:54 AM

What I did was just add an img tag to each list item with a float:left so the text wraps around it. Looks fine now.

oh and I changed the hover for the li so it changes the background position rather then load a new image. So now the lag is gone.

[Edited on October 5, 2007 at 11:30 AM. Reason : .]

10/5/2007 11:29:11 AM

more than one way to skin a cat, that'll work.

10/5/2007 1:03:05 PM

ok so far everything works in IE7 and Fire Fox but the over all page alignment is off in Safari. the parent div tag for everything is aligned to the far left side of the page rather then auto (left and right) to keep it centered on the page.

(Haven't tested in previous IE versions yet, about to install multi-IE though)

10/6/2007 1:52:21 PM

make the wrapper position:relative

10/6/2007 8:08:11 PM

y'all design for safari? why?

10/6/2007 8:26:52 PM

I design for most browsers because a) its good practice and a good habit b) I never know who's using what.... c) I use Safari on my mac


oh and now d) it looks cool on my iphone haha. (although for some reason this site doesn't load correctly on the iphone....but it did earlier....)

[Edited on October 6, 2007 at 9:00 PM. Reason : ...]

10/6/2007 8:59:38 PM

meh, i'm only partly kidding...the only browser crappier than safari is IE...i'd rather use opera over safari any day

10/6/2007 9:36:26 PM

It would be nice if every one used FireFox. Sadly some people still live in darkness and haven't been shown the light.

10/7/2007 2:57:00 PM

safari has the nicest looking rendering when it decides it wants to work

prettiness: safari>ie7>firefox=ie6

functionality: firefox>ie7>ie6>safari

[Edited on October 7, 2007 at 3:22 PM. Reason : omg]

10/7/2007 3:21:23 PM

IE6 and IE7 both suck for handling styled ordered lists! finally found a working solution....

10/10/2007 3:52:36 PM

Quote :

"safari has the nicest looking rendering when it decides it wants to work"

when is the keyword

Quote :

"prettiness: safari>ie7>firefox=ie6 functionality: firefox>ie7>ie6>safari"

unfortunately, i think functionality overrides prettiness in an environment where functionality is key

10/10/2007 8:00:25 PM

I've found that both safari and firefox are the easiest to design functionality and design for without too many problems. IE on the other hand is a bitch.

-------------------------

http://www.tripyramidstudios.com/test/

did a complete re-design (again) and i'm still having a problem aligning the text in the middle of the sidenav. right now I have the line-height the same as the li height which is cheating because if i ever add a link that wraps the text i'm fucked. So i'd like to find a way to align the text in the center and also the img (which is float:left) so the text will play nice with it.

Oh also content styling hasn't been touched apart from the body's font stuff....

(I also realize that i'm loading a sepearte image for the headernav hovers...which i'll change to just a position rather then a whole new img.)

also this has not been tested in IE yet! So i'm sure its broken as fuck. Only in FF and Safari (both on Mac)

[Edited on October 10, 2007 at 10:52 PM. Reason : ,]

10/10/2007 10:46:35 PM

hmm...can you not change the width and height of 'a' tags in IE? no matter what my width and height is the 'hotspot' is only around the text area and I can't seem to change that. Works great in FF/Safari

[Edited on October 11, 2007 at 12:37 AM. Reason : t]

10/11/2007 12:37:33 AM

display:block

10/11/2007 2:32:25 PM

that won't work. I think you have to 'fake' it by creating larger margins. IE sucks.

10/11/2007 2:36:37 PM

The combination of having a static page width that's so wide and having the navigation on the right-hand side is really going to bone anyone who sees the site in a lower resolution. Horizontal scrollbars suck in general, but they suck even more when the first thing you lose is some of the navigation.

What's with the "Profile/Portfolio/Blog" text moving down to the bottom of the bar on hover? I felt like I was playing a keyboard, lol.

It's interesting that the buttons at the top have the entire area linked in IE, but it isn't the same way on the sidebar.

10/11/2007 3:05:34 PM

I've tested the page in a 1024x768 environment and it doesn't use side scrollers. I'm not supporting anything lower then that. chances are if they are still using 800x600 then they don't need my services.

I moved it down to the bottom because once you click on it thats where the 'selected' page will have the button text...more of a 'design' effect that I liked.

I didn't notice that...i'll have to check that and see why when i get home from work.

10/11/2007 3:19:58 PM

OK, cool. The sites I've done were all "non-design" sites and were all fluid instead of being a static width, so I wasn't sure if the standard lowest denominator these days was 1024 or 800. I usually run in 1280x1024, but don't have my browser windows maximized, so it scrolled until I made the window a bit bigger, but it's all good as long as you've checked it out--anyone running 1024 who doesn't have their browser maximized is asking for scrollbars anyway.

This is strictly an ergonomic suggestion... if you like the text moving up or down on the tabs at the top of the screen, I might consider reversing it so that they're on bottom by default and move up when hovering. The whole tab navigation thing is simulating file folders from Reality, so when you're highlighting a particular folder you would expect it to move up in importance.

10/11/2007 6:53:12 PM

hmmm...didn't think of that. i'll try that now....

10/11/2007 7:00:08 PM

ok...tried that...looks good.

10/11/2007 7:12:09 PM

ok...pretty much done...I'm open to any input now. (portfolio is still missing a bunch of stuff and i'm probably going to scrap it and turn it into a dynamic page linked to a database so all I have to do is upload an image with some 'info' and it will add it to the list automatically...

http://www.tripyramidstudios.com

10/15/2007 7:44:46 PM