Mac Book/Safari/IE/Fire Fox Errors

[Alanna 🥀🖤]

So it seems that a lot of people who use any of the above have troubles viewing my designs. For example, the side by side boards & the Profiles. That's all so far that has been reported... however I was wondering if there is any way to code these two things so they are read and accepted on all formats?

Here are the screenshots of the errors: 

[Tim Camara]

For the first one, looks like you just need to remove the inline float: right; on the content div that's over to the right. I'd have to look at the code more closely on the second one, but I'd look for floats, table layouts, and positioning.

P.S. valign isn't supported in HTML5, you should use CSS (vertical-align) instead.

[Alanna 🥀🖤]

If I remove the floats it doesn't align how I want it to. Is there another way to do the same effect? Also can I PM the board list template to you? I don't really want to post it publicly.

[Tim Camara]

For the first one, there's only the one element that's floating, the div with the user info in it, and it looks fine to me (in Chrome, at least) when I remove the inline float.  None of the other divs (awards, status, social/im, etc.) are floated, and they all look the same to me.

For the second one, check out the attached image.  Two things to note, first, you have a table row that wants to use 200% of the page width plus an extra 20 pixels.  That's invalid and should be fixed, but isn't causing the error (at least in safari).  The row that I highlighted in the inspector is the culprit, you'll need to add a width: 100% to it (you can see I added it in on the right side).  Obviously it's not perfect still, but that should get you started.  I'd recommend using the inspector to debug anything else that goes wrong.  In safari, I think you have to enable the developer mode from advanced options or something before you can access the inspector.

Attachments:

[Alanna 🥀🖤]

I'm no expert and I can't really debug anything if my life depends on it... which is why I posted for help. I did use the code posted by iPokemon for the side by side boards and just styled it. Not sure if that information helps or not.

I don't own a mac so I can't do trial and error. I just got screen shots from a friend that has one.

Edit: Tim Camara, this is what happens for me when I remove the float right for my first issue.



For my second issue, I added a width of 96.3% so it wouldn't run off. Did that help at all?

[Tim Camara]

I'm not testing it on a mac either, just in the PC version of Safari.  Either way, that issue looks fixed now.  For the profile one, I don't what element you're changing to do that, it should be this div that you remove the float from:

[Alanna 🥀🖤]

Jan 7, 2014 8:51:53 GMT -8 Tim Camara said:

I'm not testing it on a mac either, just in the PC version of Safari.  Either way, that issue looks fixed now.  For the profile one, I don't what element you're changing to do that, it should be this div that you remove the float from:

That's the one I removed and that is what happened above that I screenshoted.

[Tim Camara]

Is it happening now?

[Alanna 🥀🖤]

Jan 7, 2014 9:45:05 GMT -8 Tim Camara said:

Is it happening now?

Yes. I just took out the float again. adoxography.boards.net/user/1

[Tim Camara]

Okay, so, when I posted my last comment, I had edited your template to remove the float. Everything looked fine. Now, after you removed a float, it looks like it did in your earlier screenshot. The fix appears to be adding a float: right to this div:

[Alanna 🥀🖤]

Jan 7, 2014 10:08:47 GMT -8 Tim Camara said:

Okay, so, when I posted my last comment, I had edited your template to remove the float. Everything looked fine. Now, after you removed a float, it looks like it did in your earlier screenshot. The fix appears to be adding a float: right to this div:

That's where it was originally though?

Here is the original code with the float:

SPOILER: Click to show

<div class="container show-user">
<div class="title-bar">
<h1>View Profile - $[user.name] ($[user.username])</h1>
</div>
<div class="content cap-bottom" style="font-size:.9em;">
<div class="ui-tabMenu">
<ul class="ui-helper-clearfix">
{foreach $[menu]}<li{if $[menu.active]} class="ui-active"{/if}><a href="$[menu.href]">$[menu.text]</a></li>{/foreach}
</ul>
</div>
<div class="pad-all-double clear">
<div class="float-left" style="margin-bottom: 8px;">
$[user.miniprofile]
</div>
<div class="float-right controls">
$[options]
$[send_message_button]
$[edit_profile_button]
$[follow_button]
$[invite_button]
<div class="float-right clear pad-top">
<span class="note pad-right" style="margin-right:-5px;">$[user.username]</span>
{if $[user.is_online]}
                    is currently <b>online</b>
{else}
was last online <span class="note">$[user.last_online]</span>
{/if}
</div>
</div>
</div>
<div style="float: right; width: 820px; margin-top: 10px; margin-right: 10px; margin-bottom: 12px;">
$[content]
</div>
</div>
</div>

[Tim Camara]

I'm pretty sure you were removing the wrong float: right.

[Alanna 🥀🖤]

Jan 7, 2014 10:37:58 GMT -8 Tim Camara said:

I'm pretty sure you were removing the wrong float: right.

That is the only float right there is.

[Tim Camara]

The one in the first picture I attached is in the summary tab, not the profile overview.

support.proboards.com/attachment/download/13376

[Alanna 🥀🖤]

Jan 7, 2014 10:55:42 GMT -8 Tim Camara said:

The one in the first picture I attached is in the summary tab, not the profile overview.

support.proboards.com/attachment/download/13376

There is no float in the Summary tab. I think it shows up there in elements because I have the float right on the div surrounding the $[content] which will show up on each tab.