PDA

View Full Version : Minor Spacing Issue..



ikon
09-29-2005, 06:33 PM
if you look at my website in IE, www.ikonmusic.net (http://www.ikonmusic.net) , you will see that there is some unwanted spacing above and below the top row of buttons, and at the bottom right corner where the "Featured Track" is...im not exactly sure how to fix all of that..maybe if one of you could take a look at the code and let me know exactly what to alter, id appreciate it...thanks

jscheuer1
09-30-2005, 04:01 AM
I'm still trying to get rid of the error that is left over from when we worked on this page before. On 'news.html' where you have:

onload=init;getcontent_heightIt should be just:

onload=init;That will take care of the one remaining error when this page loads. Though, as I said before when I mentioned this in connection with your menu not working, it is a non-fatal error, it should be taken care of as it looks bad to have that yellow error triangle there in the bottom left corner of IE.

As far as your spacing issues go, I don't see what you mean about the top buttons. The 'Featured Track' thing looks like it could go a little to the left but, when I do that the background border graphic doesn't show through. Also in FF, there is a completely unseen in IE graphic of the musician sitting on a car (http://ikonmusic.net/ikonmusic_20.jpg) that covers (mostly) the standing musician which is fully visible in IE. I'd simply remove the car graphic or substitute it for the standing musician one but, there seems to be no simple way to do that without throwing the entire page off in both browsers so, I'd just set its visibility to invisible:

<img src="http://ikonmusic.net/ikonmusic_20.jpg" alt="" height="480" width="296" style="visibility:invisible;">I'd consider replacing its source with a 1px by 1px transparent gif with the dimensions set as is in the img tag to save on download time. However, this situation really cries out for a total page rewrite, well beyond the usual scope of this forum.

Perhaps someone else will take up the challenge.

ikon
09-30-2005, 12:41 PM
about that musician sitting on the car...that was the pic that i have since replaced with the standing musician with the mic...when i open that link (www.ikonmusic.net/ikonmusic_20.jpg) in firefox, i dont see the musician sitting on the car at all...i uploaded that standing picture to my server in place of the car picture so it shouldnt be showing up at all, considering that pic doesnt even exist on my server...is there another reason why youre still seeing that pic? everything looks fine to me?? (that could be a major appearance issue)

fixed the error issue..

thanks

jscheuer1
09-30-2005, 10:03 PM
Then it must have been cached on my end, at least in FF's cache on my end. Well, that's good news then, especially since it is no longer happening here, sorry about that. I still think a major rewrite is called for. The page seems overly complex for what it is displaying. However, without that major glitch we may be able to muddle through. With that in mind, I still don't get what the problem is with the top buttons' spacing. Where exactly is the extra space? Also is the extra space, to you, for 'featured track' what I see it as - too wide on the right by about 5 pixels?

Another question that I have is about what appears to be an image used visually as a border (it may be a background image or not even an image but, an effect or combination or something else) on the right of the large gray content block. It is what is partially covered where the
'featured track' is too wide. I used FF's display image information from the developer's extension and couldn't find it. I would need to know its url if it is an image and/or how it was created if it is something else or a combination of an image and an effect. I would need to know this to properly fix the spacing of the 'featured track' block.

ikon
10-01-2005, 04:56 AM
yes, for the featured track, the image is too wide to the right in FF, and in IE on top of that there is an extra space that appears as a grey border only on the left of the image, which is also the case above and below the row of links on the top (only in IE)..

and what youre referring to in the second part of your response is an effect on the image named ikonmusic_21.jpg...

thanks for your help

jscheuer1
10-01-2005, 03:03 PM
OK, I still just cannot see what you mean about the buttons. We are talking about the ones that are labeled like - 'latest news', 'about me', etc., right? Anyways, I was able to fix up the 'featured track' appearance to my satisfaction. Where you have:

<td colspan="3" background="http://ikonmusic.net/ikonmusic_32.jpg">
<iframe src="http://www.ikonmusic.net/week.html" name="ikon2" allowtransparency="true"

align="middle" frameborder="0" height="82" scrolling="no" width="209">
</iframe><br>
</td>
<td>
<img src="http://ikonmusic.net/spacer.gif" alt="" height="82" width="1"></td>

</tr>
<tr>
<td colspan="20">
<img src="http://ikonmusic.net/ikonmusic_33.jpg" alt="" height="16" width="693"></td>I used:

<td colspan="3" style="background:url('http://ikonmusic.net/ikonmusic_21.jpg') 611px bottom;">
<div style="position:relative;right:2px!important;right:3px;background-color:#D3D5CA;"><iframe src="http://www.ikonmusic.net/week.html" name="ikon2" allowtransparency="true"

align="middle" frameborder="0" height="82" scrolling="no" width="209">
</iframe></div>
</td>
<td>
<img src="http://ikonmusic.net/spacer.gif" alt="" height="82" width="1"></td>

</tr>
<tr>
<td colspan="20" style="background-color:#0F0E0C;">
<img style="border-right:1px solid #5D5855;" src="http://ikonmusic.net/ikonmusic_33.jpg" alt="" height="16" width="693"></td>I also liked this version (attached):

ikon
10-02-2005, 01:42 AM
yes, the ones labeled "latest news" "about me" etc...and the problem im having with those is when i open the website in IE, there is extra spacing above and below them all the way across, the extra spacing looks exactly like the extra spacing that used to occur next to the featured track image..

as far as the featured track image, its perfect now! i appreciate your help man

and i opened that zip file you sent, and im wondering what the difference is between that and my current one?

jscheuer1
10-02-2005, 02:21 AM
In the zip file I custom rewrote the script for the menu so that the drop downs occur in a consistent position no matter where on the header item one mouses over. I also changed several of the table cells so that the left hand border is more plain yet still uniform and the bottom image in the main area is a little wider.

I still cannot see the spacing issue in IE as regards the menu items. Perhaps if you do a screen capture and save the image, you could upload it to the site and give me the url to it. It may still be hard for me to work on because, as far as I can tell, it just isn't happening here. Seeing can't hurt though. This is in what version(s) of IE? At what resolution(s)?

ikon
10-02-2005, 05:24 PM
using IE 6.0 resolution is 800x600...

and how do you take a screen shot in IE and FF?

jscheuer1
10-03-2005, 03:00 AM
I see you grabbed the custom script from the .zip version. It is custom in that it is only designed for the current layout. One other modification in the .zip I forgot to mention was the use of the galleryimg="no" attribute on all images. It gets rid of the the IE pop-up (save, mail, etc.) when you hover over a large enough image. Looks like only http://www.ikonmusic.net/ikonmusic_20.jpg needs it:

<img galleryimg="no" src="http://ikonmusic.net/ikonmusic_20.jpg" alt="" height="480" width="296">
I fired up an old NEC MultiSync XV15 monitor I had lying around and viewed the page in IE6 at 800x600, still no different than in FF. Just on a long shot, try clearing your IE6 cache and refreshing the page, see if that changes it. If that doesn't get it, the way to do a screen capture is to open up your favorite image program, minimize it. Next bring up the page in IE6, then hit the PrtScrn (Print Screen) key. This will put an image of the screen on the clipboard. Now restore your image program and choose 'Paste as a new image' or the equivalent. Save the image as .jpg with quality around 60%, so as to not be too large, you could even resize it first to about 75% of original size, or smaller and/or crop it as well. I just need to see how this gap looks on your system. It honestly looks the same to me in IE6 and FF. What OS are you using? Do you have the system tray on the side of your screen instead of at the bottom? I'm having a hard time figuring out why it would look different to you, as the dimensions of your layout are mostly fixed. Just seeing it would help but, as I said before, won't do a whole lot in helping me change it, better than nothing though, which is what I have to go on now. One last question, in IE6 with the custom script mod, are the tops of the drop downs in the same location relative to the header images as they are in FF?

ikon
10-03-2005, 05:49 AM
okay heres the screen shot > http://www.ikonmusic.net/shot.jpg ...

and to answer your last question, no theyre not..in IE, they start about a pixel higher then in FF, which is actually the pixel that makes up that border that im trying to get rid of below the buttons(that you cant see on your comp)..

aside from that, is there any way to move those drop down menus slightly to the left to line up with the left side of the corresponding buttons?

thanks

jscheuer1
10-03-2005, 07:38 AM
That is what I was seeing and I didn't notice it before because it is so minor and, I misunderstood. The way I would have explained it, if I had noticed it before is that the black line under the buttons is one pixel thicker in FF than in IE, possibly the one above them too but, even harder to notice. This is the kind of thing that looks fine in either browser, just not exactly the same and should be accepted or ignored. Adjusting something like this that really needs no adjusting can often cause problems in other browsers not immediately under consideration, like Opera or Safari, etc. or in older versions of the browsers you are considering.

Now, about moving the drop downs a bit more to the left, good idea. Problem is that they are already lined up with the left edge of their respective buttons. The way the buttons are designed those are the left edges. We could move them over a bit to the left to line up with what looks like the left edges except that amount is different in FF and IE and in both browsers, different for each of the two buttons involved. I've worked this out but it and the previous modification messed things up in Opera and possibly others. So, let's replace:

eventX=ie5? findPosX(event.srcElement) : e.target.xwith these two:

eventX=typeof event!=='undefined'? findPosX(event.srcElement) : e.target.x
eventX-=typeof event!=='undefined'? event.srcElement.src.indexOf('about')!==-1? 10 : 9 : e.target.src.indexOf('about')!==-1? 11 : 9If just about anything about this menu changes, this will need adjustment or perhaps not work at all.