Topic: IE border flakiness Pages that link to <a href="https://ozoneasylum.com/backlink?for=22543" title="Pages that link to Topic: IE border flakiness" rel="nofollow" >Topic: IE border flakiness\

 
Author Thread
wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

IP logged posted posted 07-14-2004 00:17 Edit Quote

Hey,

I had a problem with artifacts of graphics showing up in a (double) border until the page was refreshed or I moused over a link, then it went away. I did a scrub and thought I had got rid of it. the site and css validated, but someone told me they were having the problem. I cannot see the problem when I type in url or use my favorites to get there. however, when I click a link like, say here:

http://www.membersclubataldarra.com/nindex.cfm

the problem reappears. had some others try this and some had the same problem and some saw it all the time.

does anyone have any idea what this could be? quite perplexed and frustrated.

any and all help is greatly appreciated.

thanks

bill

(Edited by wcr one on 07-14-2004 03:36)

MalFunkShun
Maniac (V) Inmate

From: few miles outside philly
Insane since: Jul 2001

IP logged posted posted 07-14-2004 06:10 Edit Quote

I checked with IE, Avant (which uses IE engine ??? I think), Firefox, and Netscape 7.1. *i know a bit redundant)

Everything looked fine to me. Nice layout by the way.

edit: spelling error.


(Edited by MalFunkShun on 07-14-2004 06:11)

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

IP logged posted posted 07-14-2004 07:29 Edit Quote

Hey Mr. FunkShun,

thanks for the look-see and for the compliment. nice to hear.

I think the issue is still there, but I figured it out and you looked after I removed it. It is still a problem however because it is the background "watermark" image that goes in the content div. I would like to still have it there, but as you can see:

With watermark -bordr glitch:
http://www.membersclubataldarra.com/nindex2.cfm

without watermark - no border issue:
http://www.membersclubataldarra.com/nindex.cfm

worse case I think I can live without it, but would like to have it.

any ideas?

thanks

bill

MalFunkShun
Maniac (V) Inmate

From: few miles outside philly
Insane since: Jul 2001

IP logged posted posted 07-14-2004 13:33 Edit Quote

QuickSolution to your problem. Remove all the content inside the NAV and CONTENT div but keep them in the HTML.
Change your background color of those two areas to #124412. You will get the double boarders you want by doing that.
Remove the background image from CONTENT.
As a matter of fact. The only thing your NAV and CONTENT needs is PADDING, DIMENSIONS, COLORS and BORDERS.
Now place RELATIVE DIVS, lets say NAVC and CONTENTC inside these AREAS @ 100% width/500px height and set the background color to #FFFFCC.
Setup your background and text in your CONTENTC and NAVC same as it was in CONTENT and NAV.

The problem was the the background color runs to the edge of the border and with both of them being the same you can't diferentiate. ( this only showed up in Firefox).

Now that I think about it you can get the same effect by changing the BORDER to double green and removing you Padding all together. That would be much easier. But you would still have the water mark runing into the border. Probably have to go with the first method.



(Edited by MalFunkShun on 07-14-2004 14:06)

MalFunkShun
Maniac (V) Inmate

From: few miles outside philly
Insane since: Jul 2001

IP logged posted posted 07-14-2004 14:29 Edit Quote

okay i figured out how to do it the other way also. This way is a bit easier.
All you have to do is change your header gif to have a green background.
Try it and let me know if it works for you. LINK HERE

#head {
width: 100%;
background-color: #124412;
margin: 0 0 0 0;
}

#content {
float: right;
padding: 10px 5px 10px 5px;
margin: 0 -4px 0 0;
background: #ffffcc url(images/water.gif) no-repeat scroll center center;
border: 12px double #124412;
overflow: auto;
text-align: left;
font-weight: bold;
font-family: arial, sans-serif;
font-size: 12px;
color: #124412;
width: 585px;
height: 456px;
}

#nav {
float: left;
padding: 10px 5px 10px 0;
margin: 0 0 0 -4px;
text-align: center;
background: #ffffcc;
border: 12px double #124412;
height: 456px;
width: 160px;
}



(Edited by MalFunkShun on 07-14-2004 14:33)

(Edited by MalFunkShun on 07-14-2004 14:41)

MalFunkShun
Maniac (V) Inmate

From: few miles outside philly
Insane since: Jul 2001

IP logged posted posted 07-14-2004 15:17 Edit Quote

are you f*cking serious!!!!!!!!

I'm definately seeing those artifacts you are talking about. They weren't showing up till I posted it on my server.
Don't worry I will remove and delete everything that I worked on with your site in a few days. I'm just dying to know what's causing this. I've never even heard about this happening.





(Edited by MalFunkShun on 07-14-2004 15:17)

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

IP logged posted posted 07-14-2004 17:28 Edit Quote

hey malfunkshun,

sorry about that, I have had that similar problem too where it worked locally but not on server. I had the same reaction too. WTF!?!?!

thanks for all the effort. I have yet to run into anyone who has seen this before. it just does not seem like that exotic of a combination. It is no problem downloading the site, in fact I greatly appreciate the effort.

someone on the csscreator forum had this link, but did not see it until this morning. had you seen this site before?
http://www.positioniseverything.net/explorer/peekaboo.html

I will to see if I can get anything out of it out this evening.

thanks again and sorry for causing you frustration.

Bill

MalFunkShun
Maniac (V) Inmate

From: few miles outside philly
Insane since: Jul 2001

IP logged posted posted 07-14-2004 18:42 Edit Quote

have you checked you page in NS or FF? There are no borders what so ever. My markup fixed that, so please feel free to use it if you please.

That peek a boo bug is kinda weird, Can't say I've come across that one either. Maybe I have and didn't mind that 3px spacing. I do know that even with the code i did up looks slightly different between the header and content areas. That's probably that float issue.

Gimme Standards or Give me Death ~ me (unless someone already has this quote)

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

IP logged posted posted 07-14-2004 22:51 Edit Quote

i knew about the border issue, but had no real way of working around. I had tried a similar thing to what you suggested but borders were way screwed up in NN. shall try that again, along with peekaboo fix. thanks.

bill

MalFunkShun
Maniac (V) Inmate

From: few miles outside philly
Insane since: Jul 2001

IP logged posted posted 07-14-2004 23:31 Edit Quote

Tag You're it.


If you check the LINK HERE that I posted above That should be working with NN 7+. I don't have 6 so I can't tell you how that's workin. All the code is there feel free to browse and use all you want.

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

IP logged posted posted 07-15-2004 00:22 Edit Quote

that is spectactularly awesome of you good Sir FunkShun, if I was anywhere near philly I would definitely buy you a beverage of your choice. now if that peekaboo hack will only work I will be quite happy.

thanks again.

bill

(Edited by wcr one on 07-15-2004 00:27)

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

IP logged posted posted 07-15-2004 03:11 Edit Quote

well I installed your fix and it FunkShuns great. I also got rid of the 3px shift (and horz scrollbar)by using a margin: -3px; in the body element. not sure how that will verify, but makes layout work in ie6 too. could you check nn7 and ff?

thanks

(Edited by wcr one on 07-15-2004 03:14)

MalFunkShun
Maniac (V) Inmate

From: few miles outside philly
Insane since: Jul 2001

IP logged posted posted 07-15-2004 03:41 Edit Quote

looks great on this side of the monitor. FF & NN 7.
I'm glad I could have been of assistance to you.
Keep me posted on your works. I like what I see so far.

And might I ask, What's the purpose of ColdFusion for this site? (that is what .cfm is right?)
I dabbled in it here and there before I took a journey with PHP & MySQL.



(Edited by MalFunkShun on 07-15-2004 03:41)

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

IP logged posted posted 07-15-2004 04:27 Edit Quote

good to hear that it seems to be working. I actually ran into another problem on the pages for the individual holes because there the menu and the content were different lengths, and the content was variable depending on the hole. I just made it the same length as the menu (which is longer there) but with a scroll, though I am not sure how that will go over. I think it looks better if the complete hole info is showing all at once, but not sure how to get around that and still keep borders.

http://www.membersclubataldarra.com/hole1.html what do you think?

as for cold fusion, the course conditions (bottom of main page menu) is updateable (delays due to frost etc.) by the guys working the pro shop plus they are going to want to make an editable members' news page, so I just made a quick and dirty database that show the condition and an editting page. CF is what I know from work so I used it here rather than take the time stumbling around in php/mysql. I want to learn php and have another project coming up that is gratis and not due til november, so I can futz around a bit more.

I know a lot of folks don't really like cf, but when I was just getting started doing pages at work (in addition to my other work, I am a biologist by schooling), this is what the IT guys said I should use and I took a class and have never had any problems that I am aware of. But like I said I would still like to see if an old dog can learn a new php trick.

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

IP logged posted posted 07-15-2004 04:28 Edit Quote

oh, and still no luck on that border issue. for now I might get rid of watermark, and try contacting the folks who wrote the peekaboo fix.

MalFunkShun
Maniac (V) Inmate

From: few miles outside philly
Insane since: Jul 2001

IP logged posted posted 07-15-2004 05:04 Edit Quote

seems things are down at the moment. I'll probably check first thing in the morning. I have off work again and my baby is going to daycare so Ill need something to keep me busy besides my MySpace page.

MalFunkShun
Maniac (V) Inmate

From: few miles outside philly
Insane since: Jul 2001

IP logged posted posted 07-15-2004 05:17 Edit Quote

well i came across this LINK HERE.


But before I agreed with that I thought you could have all the content in one div and do a double green border like before. Place two divs with yellow background float left & float right . Position a "artificial" border repeat-y on either one of the divs edges like url(2GREENLINE.gif) or something of the sort . I'm sure you get the jist of what i'm heading towards.

Check that link above cause it's the more proper way to get this done. Good luck man please come back with results and/or questions.

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

IP logged posted posted 07-15-2004 06:22 Edit Quote

Not sure if the link is related, or if it is, I am just too dense to get it (very real possibility).

On individual hole pages I had menu and hole info at different heights because I wanted the full hole info to appear without scroll, but did not want menu to lengthen and have a bunch of blank space at bottom. with design that looks the same in nn/ff/ie, which I prefer, there is the container background issue, so we get the scroll. I think/hope everyone can live with this.

now if can just get over that watermark issue. I kind of have to laugh because I was going for a simple clean look and the coding seemed quite straightforward too. I should have looked closer at that dang double border and how it is handeled. Why can't the browsers all just get along?

thanks again.

bill

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 07-15-2004 08:22 Edit Quote

Interesting topic... sorry you are having these troubles. Just confirming: I am also having trouble viewing your borders. I am running IE 6.0.
At this point, since you do not have a finger on what the actual problem is.... I'd try removing elements one ata time, starting with the "watermark". I'd also remove or simplify CSS code, maybe replace CSS code with traditional HTML. Make sure and remove things one at a time, testing the site as you go so that you can correectly identify the problem.

GOOD LUCK!! And keep us posted.

Karl

MalFunkShun
Maniac (V) Inmate

From: few miles outside philly
Insane since: Jul 2001

IP logged posted posted 07-15-2004 13:39 Edit Quote

I think having to revert all the way back to old HTML kinda defetes the purpose of being a good web designer and would be like throwing in the towel on an issue that must have a solution. I totally agree with commenting out one CSS class at a time and see if that provides a solution. The water mark could be the culprit, but I"m willing to bet it has something to do with the float left and float right images that are on the main page. Though there is white space around them the margin still connects with border. If you look close *at times* you can sometimes make out pieces of those images.

As for the scroll bar issue, I thought you were looking for a solution to remove it totally and not just an opinion on how it looks.
Here's my opinion, you can obviously tell if the map rolls off the content area, but you may not always know that there are tables with important information all the way on the bottom. Maybe place that table all the way up top. Remember placement of content by importance is *important*. ALSO, being that the hole layout ( not to be confused with WHOLE LAYOUT ) is only an image you can always go back to the original images and resize them accordingly so all the content fits without the scroll bar. Either way the scroll bar does not take away from the design too much.

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

IP logged posted posted 07-15-2004 17:55 Edit Quote

I was actually asking both, if you could think of a work around and if there was not one, what you thought of how it looked with scroll bar. it is just a matter of what has least drawbacks. Problem with hole content is it is variable in length depending on the amount of text about the play.

Content thoughts make sense, I am still unsure of the importance priorities. Maybe table, diagram, text, that way you would always see the start of the text and realize if there was more to be seen. I will have to tweak layout and see how that looks.

as far as reverting to html, nope, but I guess I had not really given thought to issue being something else interacting with watermark, and not the watermark itself. I wonder about positioning. is there a way to position 'relatively absolute', meaning absolute within the container div? I want it to stay centered on page. I know on the position is everything page, a lot of their emphasis about the bug has to do with space between floated divs.

Unfortunately, I will not be able to really work on this until Saturday. Taking a print making class tonight and softball tomorrow.

thanks for all the input.

bill

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

IP logged posted posted 07-15-2004 18:04 Edit Quote

oh, here are a site I am working on at 'real' work:

http://161.55.120.152/ichweb/index.cfm replacing a lab guide which hasn't been updated in over 10 years. also want to create a dynamic PDF so folks who want a hard copy can get one. will obviously have a different layout, but this way when we make updates to database we can contact users and they can downlaod the new stuff and just toss out old sections. constantly up to date. am having a small problem here in that I can not get the "you are here" effect on the taxa menu. or more specifically, when I can not get the mouse over to stop when it is over the current page. It used to work, then I streamlined the css and I have not been able to get it to work since. I am sure it is something simple.

feel free to comment or ignore.

b

MalFunkShun
Maniac (V) Inmate

From: few miles outside philly
Insane since: Jul 2001

IP logged posted posted 07-15-2004 19:22 Edit Quote

For your Taxa CSS i'm not seeing any classes for a:active or #list a:active. Maybe supply some attributes to them and it might solve the problem.
Is that an IFRAME i see ? Just kidding, it works very well for what it is doing.

For an overall feeling of the site I have a couple things to say and take it however you want.
Keep in mind that I'm running @ 1280 x 1024. The main page, my eyes just get tired of moving all the way left all the way right and back again. I'm loosing what line I was on. To make it worse that bright blue background it totally stealing my attention when I return to that line which further confuses me. If I had to fix the site I would:

Center all content in a div or table, for this site it really wouldn't make a difference and a table would be easier, and make it a percentage of the window. You can insert an invisible gif say 760px at the bottom of the table so when the screen is reduced you will still have a table set to that size minimum.
I would also take that background image and desaturate it so the blue is not so intense. place it inside the div and if you really want that ruler part of it to lie on the outside of it just go ahead and reposition it -Xpx left.

There is also a print set of styles in CSS that you can apply to a page. Though I've never used it yet. Maybe this will save you some time and server space if you can figure it out. There's not alot of attributes so i'm thinking it's fairly simple. Something like :

code:
body {
size: landscape;
}



wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

IP logged posted posted 07-15-2004 19:45 Edit Quote

good ideas. funny, my problem at home is I forget I am running at 1280/1024 and trend to do thing too big, whereas at work I forget that res runs that high. that page must be seriously wide. also, will desaturate blue. may remove the ruler. liked it at first, but now it doesn't do much for me.

generally I would go away from frames in general, but here for drilldown it works good I think, the full page does not have to reload/requery each time and place in taxa list is kept.

on that Q about the link color, I am talking about on the results drill down page. here is example:
http://161.55.120.152/ichweb/screen.html where illustration menu item is black (cursor was over it) but really want it to remain white even on mouse over. I have the css for it, but have something messed up. It uses the on page style tag to set id properties for it. (nice little bit of coding out of zeldman standards book). it worked now it don't.

b

MalFunkShun
Maniac (V) Inmate

From: few miles outside philly
Insane since: Jul 2001

IP logged posted posted 07-15-2004 21:46 Edit Quote

this works in IE 6 i'm not sure about other browsers. At the moment I can't even get a:hover to work in FF. But heres what I got.

code:
<style>
a {
color: darkblue;
font-size:12px;
text-decoration: none;
display:inline;
padding:4px;
border:1px solid darkblue;
}
a:hover {
background-color:green;
color:yellow;
}
a:active{
background-color:black;
color:white;
}
a:hover:active{
background-color:black;
color:white;
}
</style>



http://cutter.ship.edu/~icn/activelink.htm



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu