/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Possible CSS issues, not too sure…

Copy linkTweet thisAlerts:
Jan 04.2007

Hi guys, I have a website which was re-built today, and it shows up perfectly fine in FF. IE however, as is the usual case, fails. Not too much, but enough to be noticeable. First, when you load the site for the first time, the background appears only where the actual contents are. If you refresh, it fixes its self. Weird… Next on the top of the page the images are completely displaced, only on the index page though. If you go to any other page it works just fine. Weirder… And last, but not least, two of the pages need to expand quite a bit down and the side images on the two side cells are set to repeat-y all the way down. IE doesn’t render the images repeating, and actually completely vandalizes the place holders. The place holders are 1px high, but IE renders them about 4-6 px high. Weird again… In my quest to fix it, i ended up killing my FF support, so I’m gonna go fix that. In the mean time, I would really appreciate it if someone could look at the website, and offer suggestions on fixing the issues. BTW, the css is validated, and the problems arise in IE 6 and 7.

Address: [url]http://www.tuscan-art.net/[/url]

Thanks in advance.

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@holyhttpJan 04.2007 — First off, the entire content of your web page is enclosed by a form tag: why?

I suggest you put a blank space (   ) inside the two cells with class names: headerLeft_1, headerLeft_2, headerRight_1, headerRight_1. That should force the browser to apply the background image to those areas.

For the side images to repeat, make sure you define repeat-y in the style of the conatining layer.

Even when a cell does not contain anything but has a background image applied to it, you should insert in it a blank space character (   )
Copy linkTweet thisAlerts:
@ray326Jan 04.2007 — You'll have much less trouble if you recode it without the table layout.
Copy linkTweet thisAlerts:
@bulgarian388authorJan 04.2007 — Hi guys,

The form tag is there because I know that is how .NET pages are structured, and I actually like it that way because if it was enclosed in a specific area, IE screws up on the margins and paddings. When it is the first element it means it wont screw with how the page renders.

The   trick doesn't work.

As far as the table layout, I really don't feel like screwing aroung with layers and positioning, especially not in IE.

Any further advice would be greatly appreciated.
Copy linkTweet thisAlerts:
@bjthefourthJan 09.2007 — In your css page add a width to your .bodyContents style

.bodyContents {

background-color: #FFFFFF;

vertical-align: top;

[I]width:680px;[/I]

}

This will make your home page look right. I think it had something to do with your text being too long. IE pushed the width of the .headerMiddle out for some reason. I tested it and when I deleted the <p> tags it worked. I'm not sure about your other problems though. I hope this helps.

B.J. Ward IV
Copy linkTweet thisAlerts:
@bulgarian388authorJan 17.2007 — WOW! That worked beutifully on the main page. Thanks! ?
Copy linkTweet thisAlerts:
@WebJoelJan 18.2007 — Very nicely done! I like the images and colors. Impressive. ?

Aside from <table> layout which I would consider switching to <div>, css and non-table, your site loads in 56-K at just over 12 seconds... You should strive for "8-seconds or less @56-k", as this is about the length a visitor will wait for a page to render, before 'back-clicking' out of your site. And alot of people still use dial-up (and virtually nobody actually comes close to "fifty-six kbs" speed). Optimizing your images might acheive this 'under 8-seconds' goal just by itself (leaving your table structure intact).

I use DSL-lite (just a bit short of "T1" speed, -about 0.9MB per minute download), and I see about a 1 or nearly 2-second 'rendering' of the page, in piecemeal. That, is caused by table-layout, as the browser 'reads' and 'populates' each TD cell as they are encountered, and then 'shoves it down' making room for the [I]next[/I] td encountered, etc.
×

Success!

Help @bulgarian388 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...