Jump to content

Layout issues with FISD 2012 theme


Brent

Recommended Posts

The new theme looks great. Unfortunately I'm having bugs with some of the browsers I'm using, so I hope I can help get some of the kinks worked out. Cross browser style and layout issues are a huge pain, so I'm sorry to have dump these issues on Lucas and our other webmasters.

 

I'm using Internet Explorer 10 in compatibility mode. (Browser Mode: IE 10 Compat View, Document Mode: IE7 Standards). I'm experiences similar layout problems with the Windows Phone 7 browser, which is an IE9 variant, but I can't take screenshots from the device so I'll primarily refer to the desktop experience.

 

There are quite a few quirks right now, so I'm not going to go deep in to the style sheets to try to figure out what's going on unless someone wants me to try doing that. I'm just going to try documenting the most noticeable effects I'm seeing.

 

Title:

mainmenucss.png

 

"Also tagged with" over run:

themeoverrun.png

 

Buttons:

buttonproblems.png

 

Grid alignment:

alignmentproblems.png

 

While looking at this I also notice that there are some HTML issues that might be confusing the browser, such as multiple elements with the same id (I think id was used instead of class for the "left active" content).

 

Check out the html for: http://forum.whitear...=0

<div class='desc lighter blend_links'>
  Started by <span itemprop="creator"><a hovercard-ref="member" hovercard-id="2179" class="_hovertrigger url fn name " href='http://forum.whitearmor.net/index.php?showuser=2179' title='View Profile'><span itemprop="name">ZeroRoom</span></a></span>, <span itemprop="dateCreated">Yesterday, 09:23 AM</a>
</div>

 

It appears that there is a mismatch between a span and an anchor near the end <span ...> … </a>

 

Thanks for the work keeping the forum going! Let me know if there is anything I can provide that will help.

Link to comment
Share on other sites

I've noticed that overrun on my copy of FirefoxPortable 11.0, so I'm with you there, the rest I don't seem to be having. It could be the compatiblity mode or IE itself, but I'm not an expert on it. Hope your issues get sorted out, Brent. I wish I could help out a fellow Bothellite. :P

Link to comment
Share on other sites

keep those 2011 skins running!

 

Removing the jump-to-unread blue dot was good motivation to move to the 2012 theme :). I'm looking forward to everything working well though.

Link to comment
Share on other sites

Lucas is working at fixing the compatibility issues with IE, Firefox and google chrome are working fine ;)

I believe this is the experience of most web developers ;)

Link to comment
Share on other sites

I believe this is the experience of most web developers ;)

 

Your absolutely right Brent - Browser compatibility ain't the challenge that it used to be but that damn IE is the last hold out of the web designers nightmare!

 

 

 

Thanks for posting these. I have no access to Internet Explorer so it's good to see screenshots.

 

That issue with the menu bar was pointed out during testing by RogueTrooper who also uses IE, I thought I had fixed it (it's the IE margin bump thing) but evidently not - back on that then!

 

The overrun on the Also Tagged is a universal problem. I need to apply a different div tag to the header but due to the way IPB breaks up it's code packets I'm having the damnedest time finding the "Also Tagged With" template... Working on it.

 

From the buttons (and the nav bar) It's clear that IE can't recognise CSS gradients or rounded corners. (I was under the impression that had been fixed in 9). In a smart alec (and obviously misdirected) move I changed out all the buttons at the last minute to remove any image links and replace them all with pure CSS to speed load times. That will clearly have to be reverted at least for IE.

 

The horrific alignment issue is a tricky one for me - as I said I don't have any access to IE to check. I'm guessing it's either the margin thing again or a float property. Brent could you see if you can spot the CSS causing this and I'll fix it, That really is the worst of all the bugs.

 

Meanwhile I also have a look at that left active content ID/Class issue and see if that's what has happened.

 

Thanks again Brent - more screenshots for any issues are welcomed!

 

P.S I always forget how horrible fonts look in IE until I see it again. Urgh!

Link to comment
Share on other sites

OK - this is what the top navigation bar looks like for everyone but IE:

 

ScreenShot2012-03-24at15034PM.png

 

Clearly it's rendering transparent in IE.

 

I have added a safety that should at least get IE users a solid colour, which is not as nice as the shiny metal look but at least legible.

 

Can someone using IE 7 or above please let me know ASAP if this fix has worked?

Link to comment
Share on other sites

It looks like IP Board is running the css through some sort of minifier. I can see the change you made in the css on the main page:

 

http://forum.whitear.../ipb_common.css

Contains #primary_nav { background-color: rgb(200, 200, 200) }

or something to that effect

http://forum.whitear.../ipb_common.css

does not contain that

 

Some sort of server side css cache preventing the change from coming through?

Link to comment
Share on other sites

Hmm. My bad apparently. I'm getting the grey buttons now on all pages. I had to clear my cache several times for some reason.

Link to comment
Share on other sites

(-A-) I'm assuming/hoping you're working on getting those great EIB and Birthday widgets back up into the right column?

 

(-B-) Birthdays are listed again in the bottom, but only the first 5. How can I view more/all like you can with "who's online?"

 

Neither is a priority, just hoping they're on your radar!

Edited by LadyInWhite
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...