WordPress › Support » Fluid Width Blix Theme

dancing dragon
Member
Posted 3 years ago #

I converted the Blix theme to fluid width for my own use, and need some help testing it out on different browsers and browser versions. Just go to the demo site below, click around and change browser window size, and let me know if anything doesn't look right and which browser version you are using. Thanks!

Fluid Blix

I have tested this on FireFox, Google Chrome, and Internet Explorer 6. I am unable to install and test with Internet Explorer 7 and above, and Safari, because my computer is running on Windows 2000.

Any help and feedback would be greatly appreciated.

For reference, this is the original Blix.
jberghem
Member
Posted 3 years ago #

Works fine! No problems in IE7 and Safari for Windows. [yes! you did know that Safari is now also available for Windows, didn't you?]

Still would be nice if someone with an Apple computer would check it out on the MacOS platform. Maybe someone out there with Konqueror on Linux?
dancing dragon
Member
Posted 3 years ago #

Thanks for testing in both IE7 and Safari on Windows.

If anyone expresses interest, I will consider releasing this fluid width version of Blix. The original is under GPL license.

Yes, I did know that Safari is available on Windows, but not for Windows 2000. Although I suppose I could try the same hack I used to get Google Chrome to run on Windows 2000.
myuseraccountname
Member
Posted 3 years ago #

I'm about to code a couple of themes for personal use soon so I understand your trouble.

Opera 9.5 (the better Safari for Windows ;) works fine without bugs:
http://img217.imageshack.us/my.php?image=fluidblixopera95okcc6.png

Internet Explorer 8 did work fine but had a minor bug. The mouseovers for the sidebar and the main nav didn't work. Although the text color mouseover in the sidebar worked (changed to blue). The text color mouseover in the main nav on top didn't work. Screenshot with the page error checker pulled up on MSIE8:
http://img356.imageshack.us/my.php?image=fluidblixinternetexploroy1.png
whooami
Member
Posted 3 years ago #

nicely done. im on my laptop at 1600x1200 and it looks fine.
dancing dragon
Member
Posted 3 years ago #

Thanks for the help and the screenshots!

I actually see a minor bug in the Opera screenshot. The "Contact" navigation is blue and I don't see the mouse pointer over it.

Strange that the error shown in the page error checker in Internet Explorer 8 is from the Google Analytics code I added to my site.

Hm... I guess this is going to be tricky to debug without my actually having access to the other browsers.
jberghem
Member
Posted 3 years ago #

If you validate the XHTML of your page (http://validator.w3.org/) you'll see that you have a brake tag like this: <br /> instead of like this: <br /> and an image tag that also needs to be closed in the same way as well. Since you're using a target attribute in links you should change the doctype from strict to transitional. XHTML strict doesn't allow the target attribute anymore but transitional does.

The CSS validates just fine.
myuseraccountname
Member
Posted 3 years ago #

I actually see a minor bug in the Opera screenshot. The "Contact" navigation is blue and I don't see the mouse pointer over it.

Actually it is not a bug - the mouse pointer just doesn't get captured in normal screen shots (by pressing "print" or "alt"+"print" etc). It is similar to the problem when trying to capture a video that's running in a video player. =)

The reason is that most videos and some UI elements of the OS are hardware accelerated and thus bypass the normal screen by using the higher speed graphics acceleration of your hardware GPU. Some screen dump and screen cast software can capture hardware overlays though.
An alternative way for the Windows OS is to go to: "Display Properties" -> "Settings" tab -> "Advanced" -> "Troubleshoot" -> turn off the hardware acceleration by moving the slider to "None". Just keep in mind that this will slow down the render and your OS's performance and is not recommended for long term use! Only if you really need to capture your pointer and don't want to download extra software. :)
dancing dragon
Member
Posted 3 years ago #
^ I see.. thanks. One less bug. :)

^ That is a convenient tool for checking XHTML. Thanks. Looks like all of my XHTML strict errors were coming from adding StatCounter, Google Analytics, and AdSense (to my own site, not the actual theme itself).

This Analytics code was producing the "_gat is undefined" error above (in the screenshot of Internet Explorer 8). I'm not sure if it's because it's trying to dynamically generate the script src tag and maybe IE doesn't like that.
```
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("###");
pageTracker._trackPageview();
</script>
```
So I just changed it to hard-code the src. Not sure if that fixes the problem but I did find some other people on the Web mention this same problem.
```
<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("###");
pageTracker._trackPageview();
</script>
```
badwriting
Member
Posted 3 years ago #

Hi there,
Looks like there is a big problem in Konqueror.

I'm using Konqueror 3.5.6. on Kubuntu Feisty. So this is possibly a bit out-dated.

I dropped a screen shot of it on my site:
onlinerator.com/images/konqueror_fluid_blix1.png

Everything is centered, no sidebar, much text is missing.

Strange really - I hardly ever find Konqueror failing to display layouts that other browsers display.

I have just been browsing for a new, robust, layout for myself today when I saw your thread here.
Good luck.
leadandfollow
Member
Posted 3 years ago #

^ That's strange. I looked at it using Konqueror 3.5.4 over ssh with x-forwarding and that was fine (except for the search button wrapping under the search box). I don't know if that's different from looking at it on a Linux machine directly.

I was hoping to figure out a generic fluid width template to convert any theme.

Anyway, I have released the files if anybody wants to play with it:

Fluid Blix

Also, a widgetized version of the original Blix, upgraded to work with newer WordPress versions, is here:

Fixed Blix
Nepherim
Member
Posted 3 years ago #

The Fluid layout is great. Except if there is an element that clears left/both, in which case the left nav bar drops below the content.
<br style="clear:both" />

~ ~ Dave
dancer
Member
Posted 2 years ago #

Hi everyone,

Everyone was so helpful when I first posted this thread. I hope you can help me out with some browser testing again. (I'm the OP using a different username.)

I have reworked the fluid width layout of Fluid Blix so that it now uses the same HTML/PHP code as the fixed width version but different style sheets. I think the new fluid width layout I learned from A List Apart is better. The earlier one was sort of a hack.

I think the new layout might fix the clearing problem in the previous post.

If you can help, please go to:
Fluid Blix

and just click around and resize the browser window and see if anything looks wrong. I have done some cross browser testing on http://crossbrowsertesting.com (Free!) but you can't really see the details via their applet especially during resizing.

I am on Mac with Safari and FireFox, and mainly need help with Internet Explorer 6, 7, and 8.

Note: the download at the site is still the old version but the site is running on the new test version.

Thanks!

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

Fluid Width Blix Theme - browser test help (13 posts)

Topic Closed

About this Topic

Tags

Code is Poetry