I encountered today a weird situation. I have issues in a Joomla website (http://boaz.simplem-test.tk) I have built, with the way that Firefox determines the width of li (list item) between different computers.
The problem there is with the top menu. the entire ul.main.menu width in one computer is calculated as 705px and in another computer as 722px. when I looked at the items width, in each one there is 1-2 pixels difference.
Both computers have the same version of Firefox (20.0.1), both run on the same OS (Windows 7).
Any ideas as to why this can happen?
Opening up the CSS source code, http://boaz.simplem-test.tk/templates/main_template/css/template.css , reveals no explicit settings for width in the 'main menu'. As well, when I look at the page using Google Chrome's right-click 'Inspect Element' function ( in your case, due to a 'no-right-click' script, I had to access it using the Chrome Menu->Tools->Developer Tools ), the lis in the main menu report as width:auto. Since this is the case, each menu item is automatically assigned a width according to the text contained in it, and the menu as a whole could be affected by this. In the said console width of the whole menu is calculated as 705px, but I could not find where this was specified in the code. But the crux of the problem seems to be the header <div>, which comes in at 975px, instead of 1000px, like the rest of the page. You ought to specify width="1000px" for the header, and that might fix the problem. בהצלחה!
Related
I work on Chrome with 2 to 3 tabs and the title of these are keep changing on various processes running in the background.
Now the situation is that the titles are quite long and I need to keep track of them.
By default, Chrome tab show the title through a label when we hover on it for more than 4 seconds. But the application changes title in less than that time. Now I can handle these by coding in our application, but other users can't do the same.
Is it possible to increase the width of the title of Chrome tabs?
Otherwise, is there a way to set Chrome to display the label instantly?
Google Canary this option is available, Google Canary (https://www.google.com/chrome/canary/) you can use Dev builds
after installation set the chrome flags
open Chrome canary and go to chrome://flags
Search for Scrollable TabStrip
From the drop-down menu next to Scrollable TabStrip, select Enabled there are 3 four additional options medium width, large width
use those
The only way to do this would be by touching the source code of Chrome, which I highly recommend to avoid.
Otherwise, I don't think it is possible to change the tab width settings/ display time of the hovering label from Chrome's settings.
Even using the experiments section of Chrome(using chrome://flags/), we can't do the same.
But do keep an eye on the upcoming updates if this feature ever comes up.
I have this site here (using bootstrap 4.1.2):
https://secure2.convio.net/cco/site/SPageServer/?pagename=RFL_NW_QC_Impact
And for some reason the dropdown button in the top right works on mobile, and on most of desktop but screen sizes between 786px to 991px won't work, any smaller or larger and it works perfectly.
Someone else created this page so I'm trying to help fix the issue but I can't pinpoint what's causing it. Doesn't seem like a situation where z-index would need to be used because it can still be clicked it just doesn't expand.
I checked the console and fixed the errors that came up but that still didn't solve the issue. Normally it's on mobile where I have this problem because something is overlapping the button but it doesn't seem to be the problem this time.
any help would be greatly appreciated.
thanks!
Opening/closing the menu is done by two custom functions contained in a <script> tag placed in <head>, on lines 187 and 195, respectively.
Each of them has the entire body of code wrapped in a condition:
if ($(document).width() <= 768) {
...
}
Change both conditions to if ($(document).width() <= 992).
You also have another, potentially bigger problem:
On line 391, you have …</script>, ending the current script abruptly, which is a sign that code was copy/pasted from a browser source code, without properly viewing the entire source code (when viewing large chunks of code, Chrome shows the first n lines and hides the rest under …, which acts as a link to the rest of the code). I'm surprised your console isn't bleeding heavily.
The proper way to retrieve the source of a particular tag is to right-click on it in dev-tools and select "Edit as html". In the opening editor window, you can Ctrl+A, Ctrl+C to copy the entire contents of that tag.
Try opening this page in Chrom[e/ium]. Then, if you focus on the address bar and press Return, the page is rendered as expected:
If, however, you press F5 or Ctrl+F5, the page is rendered incorrectly:
The source code of the page doesn't change, and there is no JavaScript involved. This effect can be reproduced 100% of the time in Chromium 39.0.2171.65 on Linux and Chrome 39.0.2171.71 on Windows.
Why?
The float: left at .countrydata on design.css:272 is having a wrong calculation.
You can avoid it by removing the floating and using display: inline-block, this way the content will have just the needed size, but wont float. If you really need it to float, I recommend setting the default width to the desired size.
I don't know if this question is relevant, but it has become an issue at my workplace, so...
One of our clients (using a Mac) showed us a 'problem' in a dropdown that we made using the default <select> tag. The dropdown has 43 <option>'s. In our Windows PC, the dropdown has a scroll bar (as you can see in the screenshot) showing only some items at a time. But in the client's browser, the dropdown shows all the items at once.
Is there a way to have scroll bars on the dropdown on Mac PCs? If no, what possible alternatives can I apply to get rid of this issue? Please note that the dropdown uses HTML's default <select> and <option> tags and I am hoping not to use any jQuery plugins as an alternative.
Thanks :)
Edit: For reference, here's the website - http://webcityhome.com/client/aairportershuttle/reservation.php (On the Pickup Location, go to 'Pier' and select 'Pier no.') (link defunct)
This is the Windows screenshot in our PC -
And this is the Mac screenshot in the client's PC -
This is the normal, expected behavior of a dropdown list on OS X. OS X uses the entire available vertical space for the list, it does not restrict it to some arbitrary portion of the screen.
I'd tell your client politely to shove it. What he wants to do is alter the default behavior of standard OS provided controls. That's not the job of a website developer, and it's not an issue either. It'd be an issue to change it and provide all users with unexpected behavior.
Every single dropdown list in OS X works this way. Ask your client why it's only an issue on your site.
There does not seem to be a problem on Chrome or Safari on Mac OSX. Here is a screenshot.
It displays an arrow to scroll down that is activated on scroll or mouseover.
I'm unsure if this will actually work, but try adding this to your stylesheet:
select {
height:7em;
overflow:scroll;
}
Both the <select> and <option> tags can be stylized with CSS.
If you want to have a scroll bar, try adding a size attribute, e.g., <select size="20">.
I've had an intermittent problem that I thought was due to un-cleared floats. What happens in Chrome (my main development browser) is the vertical scrollbar will lock in the top position and I cannot scroll down the page. Initially when the page starts to load it will allow you to scroll and then when the page is loaded it will jump back to the beginning and lock itself.
I've just been ripping apart my pages looking for un-cleared floats and missing tags and finally found out that it is due to a URL having a # at the end (which gets programatically added and remains when I refresh the page).
This issue only happens in chrome - does not appear to happen in other webkit browsers.
I assume its looking for an anchor and not finding it and then giving up. Its definitely a bug but was wondering about a workaround, or why it is only doing it on my site - I can't duplicate it for instance here.
Shift click the URL to open in new browser:
URL that will lock : /faq#
URL that doesn't lock (same but without the #): /faq
For me, the solution was in a popup div's style: I had to make sure a div with a z-index and no float but surrounded by floating divs was given the style float:none and an explicit width (floating this was not needed as it was absolutely positioned). I have a thread working through this here.