petegale

Hi Raz,

The rounded corners are on the list element itself (the ‘ul’ tag). When you hover over the Home link in your menu, it’s the link element (the ‘a’ tag) that gets a new background.

What you need to add is rounded corners on the link element, when hovered over. So:

#menu-main-menu .menu-item-home a:hover { border-radius: 5px 0 0 5px; }

The gap between the rest of the menu items is a separate issue, but is quite easy. Adding margin between the list item elements (the ‘li’ tags) or the link elements won’t do anything, as the blue background you can see is “behind” them on the list element (the ‘ul’).

Currently there’s a red border, with this code:

.menu a { border-left: 1px solid #585858; ...(more styling after this) }

If you make the border thicker and change the colour to white (#FFFFFF) the same as your background colour, this will give the effect you’re looking for.

Hope that helps.

Pete.

jQuery like that is going to be relatively light-weight in terms of page loads. If your page is taking a long time to load, it’s likely to be another culprit slowing things down.

If you’re more worried about users with slower connections, it’s not something you can affect. More to the point, that’s likely how they’ll view most of the web if that’s their connection speed. Unless you’re doing something really wrong, which is dragging out your page load (which a bit of simple jQuery like that shouldn’t do), you shouldn’t stand out to a slow connection user.

Hi Frankie,

If your posts are going to vary that much in length, to the point where you don’t want to do this in CSS because of spacing between rows, I’d personally reconsider your layout. If you succeed in a 3 column approach with posts of varying heights, you’ll very quickly lose a neat order of 1 to 9 from left to right.

For example, if post 3 is much longer than 1 or 2, to the point where a CSS layout would cause too much white space, that extra space will instead push down post 6. So, from left to right you end up with something that resembles 1, 2, 3, 4, 5, the rest of 3, 7, 8, 6… etc.

Apologies, it’s a little hard to illustrate in text form!

However, if you are set on doing it the way you describe, I’d do this in jQuery.

First of all, I’d check the screen size with the Javascript “screen” object. This would then allow me to do a simple “if” statement around my column sorting code, so that I’m only creating a 3 column layout if the screen size is above a certain value.

https://www.w3schools.com/jsref/obj_screen.asp

I’d prefer that to browser detection, because then it’s adaptable regardless of the device. You could even have a slightly more advanced set of “if” and “else” statements for 1, 2 or 3 column layouts depending on the screen size.

For your content, just output it as normal in divs one above the other. If your jQuery is only doing something when the screen size is above a certain value, no jQuery will be needed on small devices and they’ll stay this way in a 1 column vertical layout.

If the screen size is above a certain value, your jQuery can then create 2 or 3 column divs depending on the screen size, loop through the content / article divs and move them into the columns as required.

Doing an “if” statement with relatively simple jQuery like this should be quick enough that, aside from particularly slow connections, you’re not going to have a “period when the display looks a bit odd”. Mobile connections are likely to be the slowest, and you won’t need to load any jQuery anyway as smaller devices will just use the HTML layout without any jQuery modification.

I’ve been quite general in terms of what to do, without explaining how to do it – the jQuery syntax should be quite straightforward. If it’s not something you’re familiar with, I hope my idea of how to go about it is enough for you to investigate how exactly to write the jQuery you’ll need.

Given your point about floating divs not being suitable as the divs will be of varying lengths, your idea of doing something like this in Javascript seems logical. But some people might not consider it truly “responsive” as it only alters the layout on page load, and won’t change on a browser resize / orientation change. You could add some additional jQuery event listeners for window resizing / orientation changes, though that’s up to you.

Pete.

Hi Kit,

Just had another look and got the following message. Possibly related?

Resource Limit Is Reached

The website is temporarily unable to service your request as it exceeded resource limit. Please try again later.

Pete.

Hi Kit,

The slideshow isn’t covering the menu items as far as I can see in Firefox. Which browser are you seeing this issue in?

Pete.

Hi bomsn,

I can view your site just fine in Firefox, Chrome and IE9. Do you know which version of IE you’re having problems with?

As Andrew pointed out, the W3C validator is throwing up a number of syntax errors such as misplaced HTML tags. Browsers try to compensate for these kinds of errors by working out how tags should have behaved, and display the page accordingly. It’s possible older browsers aren’t handling these mistakes as well as newer browsers do, which is why you’re seeing a discrepancy.

Pete.

Hi largerstory,

Apologies if you’ve found the answer already on another forum, but as I opened this thread I thought I might as well throw an answer in anyway!

Your menu item for donate has the specific id of item-2220. You could target it in the CSS based on this ID, for example:

#main-menu #item-2220  {
    border: 2px solid #FFFFFF;
}

I’m not sure what theme is generating your menus, but the unique ID looks like a number generated by the theme. It’s possible it could change if you were to reinstall this theme or rebuild the menu on your live environment, but you can keep an eye on the HTML with a tool like Firebug to inspect your menu items and see their IDs, classes etc.

If you’ve not used Firebug before, I’d strongly suggest Googling it and taking advantage of an excellent tool for web development.

Hope that helps.

Pete.

Hi Roman,

You’re probably not going to get a lot of answers without a link to the site in question so we can take a look at what you mean.

At a guess though, you probably want to add some extra HTML into your theme’s footer.php

Hi Steve,

The grey bar at the top of your page is there in every browser for me. This is because your <div id="page" class="hfeed site"> has a margin-top applied to it, pushing it down the page and leaving the grey space.

The value for the margin-top is in REM, which is a CSS3 attribute – this is probably why you’re not seeing it in every browser, because it won’t be supported in older browsers. I’m not a fan of using REM values for this reason, but that’s just a personal preference. You definitely have a margin-top there which is causing the grey space.

I also notice that padding around your <div class="wrapper" id="main"> looks different in IE8 (there’s a lot more of it), which may also be a REM issue.

As for the menu, there’s a few things going on. First of all IE8 isn’t picking up your display: inline-block; for the menu items. There are some compatibility issues with IE8 and inline-block. You haven’t defined a DOCTYPE, so doing that might help (something like XHTML 1.0 Transitional perhaps).

As for why the menu is starting off hidden in IE8, I’m not sure. The “Menu” toggle button has a display: none; applied, which is being obeyed in Firefox at least, but doesn’t seem to be working in IE8.

I’m not sure where this menu toggle is coming from, but as you don’t seem to want to use it at all, I’d consider removing it.

Hope that helps.

Pete.

Well I did see the white space, and I was using IE9 with the Developer Tools setting the Browser Mode and Document Mode to IE7.

It’s probably a minor change between sub-versions of IE7, or something similar. That’s the wonder of compatibility in web development – unpredictability and a multitude of browser variations!

It’s little best practices techniques (such as sizing properly etc) that help prevent these things from occurring in the first place.

Glad it’s sorted for you.

Good question. Are you using an actual installed version of IE7, or a testing tool (either IE9 in compatibility mode or something like IETester)?

Hi Matthisco,

While Validating your site is often a good idea, your problem doesn’t seem to be related to that.

Your <footer id="colophon" role="contentinfo"> has a padding-bottom of 40px. Partly due to the quirky nature of IE7, this is what’s causing the extra white space below your footer in IE7. Take that 40px of padding away, your footer doesn’t have any white space below it.

The other part of the problem is the way you’ve styled the footer. You have your <footer>, and inside that is <div id="supplementary"> with the image of the skyline on it.

Your footer is set to be 60px high, but the div inside is set at 200px high. Most browsers just show the overlapping content, but ideally you shouldn’t have a larger element inside a smaller element.

You’re basically relying on the browser to overlook the odd sizing and figure out how to display content the way it should be shown. An older browser like IE7 is a lot quirkier, and isn’t doing as good a job of compensating.

I suggest revisiting the sizes of your footer elements when you take away the padding, to avoid any future quirks in older browsers.

Hope that helps.

Pete.

You’re welcome. Happy coding!

Hi Jocce,

The white space is there because there’s not enough content to fill the browser window on larger resolutions. Your <body> is what’s filling up the empty space, and as it has no background colour it’s defaulting to white.

All you need to do is give the <body> some kind of background colour or image, and that’ll replace the white space. To have the same grey / stripped pattern as the footer, for example:

body {
    background: #737373 url("https://test.xn--bglampan-9za.se/wp-content/themes/evolve/library/media/images/pattern/pattern_2.png");
}

Regardless of what you want to replace the white with, all you need to be changing is the background on your <body> element.

Hope that helps.

Pete.

Hi Raja,

Your unordered list with a class of “menu” has the following CSS in style.css:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d)

This is CSS that only IE uses, which is why you’re not seeing the background gradient in anything other than IE9.

I’m assuming from your post that you don’t want this menu gradient and you’re happy with how the site looks in Firefox etc. If that’s the case, simply remove that piece of CSS from your style.css and you should be fine.

Pete.