Solved

CSS positioning

Posted on 2014-09-22
9
529 Views
Last Modified: 2014-09-22
Please look at http://davispipe.com/outdoor-lighting.html. On the menu, right center, click the item at the top, Irrigation. Note the gold colored < left of the first item. Click that & the full menu returns. This is done with a Flash Element.

Now look at http://rkassoc.org/Davis/outdoor-lighting.html. Similar menu center, right. Note that when you click on the top item (Irrigation), the gold < appears but on it's own line, pushing the submenu down. This version all done with CSS, Jquery.

How can I position the div containing that "gold" < so it replicates the Flash version?

Source attached.

Thanks.
outdoor-lighting.html
0
Comment
Question by:Richard Korts
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
9 Comments
 
LVL 9

Expert Comment

by:WebDevEM
ID: 40336970
Hi,

If you add a "float: left;" to the goback element, that should be close to what you want... You might also want to add "margin-top: 3px;" to push it down a little bit so it lines up better with the >

Hope this helps!

WebDevEM
0
 
LVL 58

Expert Comment

by:Gary
ID: 40337006
No menu on that page, it's on the other page.
0
 

Author Comment

by:Richard Korts
ID: 40337221
To webDevEM

Doing what you said produces the attached; worse than before.

Here is the div:

<div id="goback" style="color: #EED028; font-family: Memphis Pro Medium; padding-left: 50px float:left; margin-top: 3px; ">

My guess is a conflict between padding-left & float: left

Thanks
misplaced-back-symbol.jpg
0
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 

Author Comment

by:Richard Korts
ID: 40337223
To Gary:

I don't understand your comment.

Thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 40337243
There is no Irrigation menu on the page.
You have an unclosed script tag

      <script type="text/javascript">
$(document).ready(function() {
                  $('#slider').s3Slider({
                        timeOut: 5000
                  });
            });      
// no closing tag
      <script type="text/javascript">
0
 

Author Comment

by:Richard Korts
ID: 40337274
To Gary,

What page are you referring to?

I did a search on this page http://rkassoc.org/Davis/outdoor-lighting.html for "s3slider"; no find. That stuff is elsewhere in this project but I do NOT believe on that page.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40337281
http://davispipe.com/outdoor-lighting.html

The page is working OK in IE but not in FF.
0
 
LVL 9

Accepted Solution

by:
WebDevEM earned 500 total points
ID: 40337291
I'm guessing everyone is using different browsers here... In Chrome (for Mac) I made the edits I wrote above and got this:float left and margin top on Chrome
I looked at your site just now in IE, and it seems that you're missing a semicolon after "padding-left: 50px" before the start of the "float: left" which would ignore the float and confuse the padding-left because the browser would treat them both as one command.

Correcting that gave me this on IE 11 (Windows)IE11-Windows so it looks like there will be a more involved answer than just a line or two in order to make this work properly on all browsers.  Depending on what browser you're using, you'll also want to use the developer tools.  (For IE, that would be F12 http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx)  Looking in there I see 2 errors and 3 warnings, all of which could be confusing the final outcome of the page.  If you find and fix those, you'll have a more consistent end result and be that much closer to being able to adjust the positioning of the  back arrow.
0
 

Author Comment

by:Richard Korts
ID: 40337308
Works perfect in Firefox now after that fix on the missing semicolon.
0

Featured Post

Learn by Doing. Anytime. Anywhere.

Do you like to learn by doing?
Our labs and exercises give you the chance to do just that: Learn by performing actions on real environments.

Hands-on, scenario-based labs give you experience on real environments provided by us so you don't have to worry about breaking anything.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question